-
-
- 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-vue/Release-notes/32.1.19.md b/ej2-vue/Release-notes/32.1.19.md new file mode 100644 index 000000000..981277d6e --- /dev/null +++ b/ej2-vue/Release-notes/32.1.19.md @@ -0,0 +1,98 @@ +--- +title: Essential Studio for Vue Release Notes +description: Learn here about the controls in the Essential Studio for Vue 2025 Volume 4 Main Release - Release Notes +platform: ej2-vue +documentation: ug +--- + +# Essential Studio for Vue - v32.1.19 Release Notes + +{% include release-info.html date="December 16, 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-vue/ai-assistview/toolbar-items.md b/ej2-vue/ai-assistview/toolbar-items.md index a1e84c26a..eda26b6ce 100644 --- a/ej2-vue/ai-assistview/toolbar-items.md +++ b/ej2-vue/ai-assistview/toolbar-items.md @@ -10,7 +10,62 @@ domainurl: ##DomainURL## # Toolbar items in Vue AI AssistView component -You can render the AI AssistView toolbar items by using the `items` property in the [toolbarSettings](../api/ai-assistview#toolbarsettings), [responseToolbarSettings](../api/ai-assistview#responsetoolbarsettings) & [promptToolbarSettings](../api/ai-assistview#prompttoolbarsettings) properties. +You can render the AI AssistView toolbar items by using the `items` property in the [toolbarSettings](../api/ai-assistview#toolbarsettings), [responseToolbarSettings](../api/ai-assistview#responsetoolbarsettings), [promptToolbarSettings](../api/ai-assistview#prompttoolbarsettings) & [footerToolbarSettings](../api/ai-assistview#footertoolbarsettings) properties. + +## Configure footer toolbar + +By default, the footer toolbar renders the `send`, if attachment is enabled the `attachment` item will also be rendered which allows users to send the prompt text or attach files as needed. + +In the following example, AI AssistView component rendered with footer toolbar items such as `send` and `attachment` icons. + +{% tabs %} +{% highlight ts tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/ai-assistview/file-attachments/enable-attachment/app-composition.vue%} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/ai-assistview/file-attachments/enable-attachment/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/ai-assistview/file-attachments/enable-attachment" %} + +### Toolbar positioning + +You can use the [toolbarPosition](../api/ai-assistview/footerToolbarSettingsModel#toolbarPosition) property to customize footer toolbar position. It has two modes such as `Inline`, and `Bottom`. By default, the toolbarPosition is `Inline`. + +By settings toolbarPosition as `Bottom`, footer items will be rendered at the bottom with a dedicated footer area . + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/ai-assistview/toolbar-items/footer-position/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/ai-assistview/toolbar-items/footer-position/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/ai-assistview/toolbar-items/footer-position" %} + +### Adding custom items + +You can use the [footerToolbarSettings](../api/ai-assistview#footertoolbarsettings) property to add custom items for the footer toolbar in the AI AssistView. The custom items will be added with the existing built-in items in the footer toolbar. + +> To know more about the items, please refer to the [items](#items) section. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/ai-assistview/toolbar-items/footer-settings/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/ai-assistview/toolbar-items/footer-settings/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/ai-assistview/toolbar-items/footer-settings" %} + +### Item click + +The [itemClick](../api/ai-assistview/footerToolbarSettingsModel#itemclick) event is triggered when the footer toolbar item is clicked. ## Adding header toolbar items @@ -20,7 +75,7 @@ The AI AssistView toolbar's can be rendered by defining an array of items. Items #### Adding iconCss -You can customize the toolbar icons by using the [iconCss](../api/ai-assistview/toolbarItemModel/#cssclass) property. +You can customize the toolbar icons by using the [iconCss](../api/ai-assistview/toolbarItemModel#cssclass) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -35,7 +90,7 @@ You can customize the toolbar icons by using the [iconCss](../api/ai-assistview/ #### Setting item type -You can change the toolbar item type by using the [`type`](../api/ai-assistview/toolbarItemModel/#type) property. The `type` supports three types of items such as `Button`, `Separator` and `Input`. By default, the type is `Button`. +You can change the toolbar item type by using the [`type`](../api/ai-assistview/toolbarItemModel#type) property. The `type` supports three types of items such as `Button`, `Separator` and `Input`. By default, the type is `Button`. In the following example, toolbar item type is set as `Button`. @@ -52,7 +107,7 @@ In the following example, toolbar item type is set as `Button`. #### Setting text -You can use the [text](../api/ai-assistview/toolbarItemModel/#text) property to set the text for toolbar item. +You can use the [text](../api/ai-assistview/toolbarItemModel#text) property to set the text for toolbar item. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -67,7 +122,7 @@ You can use the [text](../api/ai-assistview/toolbarItemModel/#text) property to #### Show or hide toolbar item -You can use the [visible](../api/ai-assistview/toolbarItemModel/#visible) property to specify whether to show or hide the toolbar item. By default, its value is `true`. +You can use the [visible](../api/ai-assistview/toolbarItemModel#visible) property to specify whether to show or hide the toolbar item. By default, its value is `true`. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -82,7 +137,7 @@ You can use the [visible](../api/ai-assistview/toolbarItemModel/#visible) proper #### Setting disabled -You can use the [disabled](../api/ai-assistview/toolbarItemModel/#disabled) property to disable the toolbar item. By default, its value is `false`. +You can use the [disabled](../api/ai-assistview/toolbarItemModel#disabled) property to disable the toolbar item. By default, its value is `false`. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -97,7 +152,7 @@ You can use the [disabled](../api/ai-assistview/toolbarItemModel/#disabled) prop #### Setting tooltip text -You can use the [tooltip](../api/ai-assistview/toolbarItemModel/#tooltip) property to specify the tooltip text to be displayed on hovering the toolbar item. +You can use the [tooltip](../api/ai-assistview/toolbarItemModel#tooltip) property to specify the tooltip text to be displayed on hovering the toolbar item. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -112,7 +167,7 @@ You can use the [tooltip](../api/ai-assistview/toolbarItemModel/#tooltip) proper #### Setting cssClass -You can use the [cssClass](../api/ai-assistview/toolbarItemModel/#cssclass) property to customize the toolbar item. +You can use the [cssClass](../api/ai-assistview/toolbarItemModel#cssclass) property to customize the toolbar item. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -127,7 +182,7 @@ You can use the [cssClass](../api/ai-assistview/toolbarItemModel/#cssclass) prop #### Setting alignment -You can change the alignment of toolbar item by using the [`align`](../api/ai-assistview/toolbarItemModel/#align) property. It supports three types of alignments such as `Left`, `Center` and `Right`. By default, the value is `Left`. +You can change the alignment of toolbar item by using the [`align`](../api/ai-assistview/toolbarItemModel#align) property. It supports three types of alignments such as `Left`, `Center` and `Right`. By default, the value is `Left`. In the following example, toolbar item type is set with `Right`. @@ -144,7 +199,7 @@ In the following example, toolbar item type is set with `Right`. #### Enabling tab key navigation in toolbar -You can use the [`tabIndex`](../api/ai-assistview/toolbarItemModel/#tabindex) property of a Toolbar item to enable tab key navigation for the item. By default, the user can switch between items using the arrow keys, but the `tabIndex` property allows you to switch between items using the `Tab` and `Shift+Tab` keys as well. +You can use the [`tabIndex`](../api/ai-assistview/toolbarItemModel#tabindex) property of a Toolbar item to enable tab key navigation for the item. By default, the user can switch between items using the arrow keys, but the `tabIndex` property allows you to switch between items using the `Tab` and `Shift+Tab` keys as well. To use the `tabIndex` property, set it for each Toolbar item which you want to enable tab key navigation. The `tabIndex` property should be set to a positive integer value. A value of `0` or a negative value will disable tab key navigation for the item. @@ -250,7 +305,7 @@ In this case, the user can switch between the two Toolbar items using the Tab an #### Setting template -You can use the [template](../api/ai-assistview/toolbarItemModel/#template) property to add custom toolbar item in the AI AssistView. +You can use the [template](../api/ai-assistview/toolbarItemModel#template) property to add custom toolbar item in the AI AssistView. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -265,7 +320,7 @@ You can use the [template](../api/ai-assistview/toolbarItemModel/#template) prop ### Item clicked -The [itemClicked](../api/ai-assistview/toolbarSettings/#itemclicked) event is triggered when the header toolbar item is clicked. +The [itemClicked](../api/ai-assistview/toolbarSettings#itemclicked) event is triggered when the header toolbar item is clicked. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -299,11 +354,11 @@ In the following example, AI AssistView component rendered with built-in toolbar #### Setting width -You can use the [width](../api/ai-assistview/promptToolbarSettingsModel/#width) property to set the width of the prompt toolbar in the AI AssistView. +You can use the [width](../api/ai-assistview/promptToolbarSettingsModel#width) property to set the width of the prompt toolbar in the AI AssistView. #### Item clicked -The [itemClicked](../api/ai-assistview/promptToolbarSettingsModel/#itemclicked) event is triggered when the prompt toolbar item is clicked. +The [itemClicked](../api/ai-assistview/promptToolbarSettingsModel#itemclicked) event is triggered when the prompt toolbar item is clicked. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -335,11 +390,11 @@ In the following example, AI AssistView renders with built-in toolbar items. #### Setting width -You can use the [width](../api/ai-assistview/responseToolbarSettingsModel/#width) property to set the width of the response toolbar in the AI AssistView. +You can use the [width](../api/ai-assistview/responseToolbarSettingsModel#width) property to set the width of the response toolbar in the AI AssistView. #### Item clicked -The [itemClicked](../api/ai-assistview/responseToolbarSettingsModel/#itemclicked) event is triggered when the response toolbar item is clicked. +The [itemClicked](../api/ai-assistview/responseToolbarSettingsModel#itemclicked) event is triggered when the response toolbar item is clicked. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -360,7 +415,7 @@ You can also add custom toolbar items in the AI AssistView by using the [toolbar You can use the [promptToolbarSettings](../api/ai-assistview#prompttoolbarsettings) property to add custom items for the prompt toolbar in the AI AssistView. -> To know more about the items, please refer to the [items](../api/ai-assistview/toolbarItemModel/) section. +> To know more about the items, please refer to the [items](../api/ai-assistview/toolbarItemModel) section. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -377,7 +432,7 @@ You can use the [promptToolbarSettings](../api/ai-assistview#prompttoolbarsettin You can use the [responseToolbarSettings](../api/ai-assistview#responsetoolbarsettings) property to add custom response toolbar in the AI AssistView. -> To know more about the items, please refer to the [items](../api/ai-assistview/toolbarItemModel/) section. +> To know more about the items, please refer to the [items](../api/ai-assistview/toolbarItemModel) section. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -392,4 +447,4 @@ You can use the [responseToolbarSettings](../api/ai-assistview#responsetoolbarse #### Item clicked -The [itemClicked](../api/ai-assistview/toolbarSettings/#itemclicked) event is triggered when the custom toolbar item is clicked. +The [itemClicked](../api/ai-assistview/toolbarSettings#itemclicked) event is triggered when the custom toolbar item is clicked. diff --git a/ej2-vue/ai-coding-assistant/prompt-library.md b/ej2-vue/ai-coding-assistant/prompt-library.md new file mode 100644 index 000000000..76eab1966 --- /dev/null +++ b/ej2-vue/ai-coding-assistant/prompt-library.md @@ -0,0 +1,285 @@ +--- +layout: post +title: Syncfusion AI Coding Assistant Prompt Library | Syncfusion +description: Explore the AI Coding Assistant Prompt Library to enhance Vue development productivity with code generation, configuration examples, and contextual guidance. +control: Syncfusion AI Coding Assistant Prompt Library +platform: ej2-vue +documentation: ug +domainurl: ##DomainURL## +--- + +# Prompt Library - AI Coding Assistant + +Speed up your Vue 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. + +## How to Use + +Before starting, make sure your MCP Server is set up and running. + +* Choose a prompt that fits your need. +* Copy the full prompt with the #SyncfusionVueAssistant handle. +* Customize the prompt for your specific use case. +* Execute via the MCP Server. +* Always check and test the code before adding it to your project. + +## Component-Specific Prompts + +### Grid + +The Syncfusion Vue Data Grid delivers fast, flexible tables for large datasets with built-in interactivity. + +{% promptcards %} +{% promptcard Paging and Sorting %} +#SyncfusionVueAssistant How do I enable paging and sorting in the Syncfusion Vue Grid? +{% endpromptcard %} +{% promptcard Grouping and Filtering %} +#SyncfusionVueAssistant Show me an example of grouping and filtering data in the Grid component. +{% endpromptcard %} +{% promptcard CRUD Operations %} +#SyncfusionVueAssistant What’s the code to implement full CRUD operations in Syncfusion Vue Grid? +{% endpromptcard %} +{% promptcard Grid Export to PDF and Excel %} +#SyncfusionVueAssistant How can I add PDF and Excel export options to the Grid toolbar? +{% endpromptcard %} +{% promptcard Virtual Scrolling %} +#SyncfusionVueAssistant How do I configure virtual scrolling for large datasets in the Grid? +{% endpromptcard %} +{% promptcard Multicolumn Grid Setup %} +#SyncfusionVueAssistant Create a multicolumn Grid to display product details with sorting and filtering. +{% endpromptcard %} +{% promptcard Chat Integration %} +#SyncfusionVueAssistant How can I integrate a chat widget inside each row of the Syncfusion Grid? +{% endpromptcard %} +{% promptcard Advanced Grid Features %} +#SyncfusionVueAssistant Show me a Grid with paging, sorting, grouping, filtering, and virtual scrolling +{% endpromptcard %} +{% promptcard Troubleshooting Grid Export %} +#SyncfusionVueAssistant Why isn’t my Grid exporting to PDF and Excel correctly? +{% endpromptcard %} +{% promptcard Inline Editing %} +#SyncfusionVueAssistant How do I enable inline editing for CRUD operations in the Grid? +{% endpromptcard %} +{% promptcard Custom Toolbar %} +#SyncfusionVueAssistant Add custom toolbar buttons for PDF and Excel export in the Grid. +{% endpromptcard %} +{% promptcard Dynamic Column Configuration %} +#SyncfusionVueAssistant How can I dynamically configure multicolumn layout with filtering and sorting? +{% endpromptcard %} +{% endpromptcards %} + +### Chart + +The Syncfusion Vue Chart suite offers versatile visualization tools across various series types for insightful data representation. + +{% promptcards %} +{% promptcard Local and Remote Data %} +#SyncfusionVueAssistant How do I bind both local and remote data sources to a Syncfusion Chart? +{% endpromptcard %} +{% promptcard Range Selection %} +#SyncfusionVueAssistant Show me how to enable range selection in a Syncfusion Vue Chart. +{% endpromptcard %} +{% promptcard Chart Types Overview %} +#SyncfusionVueAssistant What chart types are available in Syncfusion Vue Chart and how to configure them? +{% endpromptcard %} +{% promptcard Markers and Data Labels %} +#SyncfusionVueAssistant How can I display markers and data labels on a line chart? +{% endpromptcard %} +{% promptcard Annotations %} +#SyncfusionVueAssistant Add custom annotations to highlight specific data points in a chart. +{% endpromptcard %} +{% promptcard Chart Export to Image or PDF %} +#SyncfusionVueAssistant How do I export a Syncfusion Chart to PDF or image format? +{% endpromptcard %} +{% promptcard Print Support %} +#SyncfusionVueAssistant Enable print functionality for a Syncfusion Vue Chart component. +{% endpromptcard %} +{% promptcard Dynamic Chart with Remote Data %} +#SyncfusionVueAssistant Create a chart that updates dynamically with remote API data. +{% endpromptcard %} +{% promptcard Multiple Series Types %} +#SyncfusionVueAssistant How do I combine bar and line chart types in a single Syncfusion Chart? +{% endpromptcard %} +{% promptcard Troubleshooting Chart Data Binding %} +#SyncfusionVueAssistant Why isn’t my remote data showing up in the Syncfusion Chart? +{% endpromptcard %} +{% promptcard Interactive Range Selector %} +#SyncfusionVueAssistant Configure a range selector for zooming and filtering in a time-series chart. +{% endpromptcard %} +{% promptcard Custom Markers and Labels %} +#SyncfusionVueAssistant Show me an example of customizing chart markers and data label styles. +{% endpromptcard %} +{% endpromptcards %} + +### Schedule + +The Syncfusion Vue Schedule component helps manage events, resources, and timelines with powerful views and customization. + +{% promptcards %} +{% promptcard Module Injection %} +#SyncfusionVueAssistant How do I inject required modules into the Syncfusion Vue Schedule component? +{% endpromptcard %} +{% promptcard Remote Data Binding %} +#SyncfusionVueAssistant Bind the Schedule component to a remote API for dynamic event loading. +{% endpromptcard %} +{% promptcard CRUD Actions %} +#SyncfusionVueAssistant Show me how to implement full CRUD operations in the Schedule component. +{% endpromptcard %} +{% promptcard Virtual Scrolling %} +#SyncfusionVueAssistant Enable virtual scrolling for large event datasets in the Schedule view. +{% endpromptcard %} +{% promptcard Timezone Support %} +#SyncfusionVueAssistant How can I configure timezone support in the Syncfusion Vue Schedule? +{% endpromptcard %} +{% promptcard Export Schedule to PDF or Excel %} +#SyncfusionVueAssistant Add export functionality to download the Schedule view as PDF or Excel. +{% endpromptcard %} +{% promptcard Timeline Header Rows %} +#SyncfusionVueAssistant How do I customize timeline header rows in the Schedule component? +{% endpromptcard %} +{% promptcard Multiple Module Injection %} +#SyncfusionVueAssistant Inject multiple modules like Day, Week, and Timeline views into Schedule. +{% endpromptcard %} +{% promptcard Troubleshooting Schedule CRUD %} +#SyncfusionVueAssistant Why aren’t my CRUD actions working correctly in the Schedule component? +{% endpromptcard %} +{% promptcard Local and Remote Data %} +#SyncfusionVueAssistant Bind both local and remote event data to the Schedule component. +{% endpromptcard %} +{% promptcard Export and Timezone %} +#SyncfusionVueAssistant Configure timezone-aware exporting for the Schedule view. +{% endpromptcard %} +{% promptcard Advanced Schedule Setup %} +#SyncfusionVueAssistant Create a Schedule with module injection, CRUD, virtual scrolling, and exporting. +{% endpromptcard %} +{% endpromptcards %} + +### Kanban + +The Syncfusion Vue Kanban organizes tasks in columns with drag-and-drop, swimlanes, and templating for agile workflows. + +{% promptcards %} +{% promptcard Data Binding %} +#SyncfusionVueAssistant How do I bind local or remote data to the Syncfusion Vue Kanban board? +{% endpromptcard %} +{% promptcard Sorting %} +#SyncfusionVueAssistant Enable sorting of cards within columns in the Kanban component. +{% endpromptcard %} +{% promptcard Swimlane View %} +#SyncfusionVueAssistant Show me how to group Kanban cards using swimlane headers. +{% endpromptcard %} +{% promptcard Kanban Card Editing %} +#SyncfusionVueAssistant How can I enable inline editing of Kanban cards? +{% endpromptcard %} +{% promptcard Virtualization %} +#SyncfusionVueAssistant Configure virtualization for performance with large Kanban datasets. +{% endpromptcard %} +{% promptcard Localization %} +#SyncfusionVueAssistant How do I localize labels and messages in the Kanban component? +{% endpromptcard %} +{% promptcard Drag and Drop %} +#SyncfusionVueAssistant Enable drag-and-drop functionality for moving cards between columns. +{% endpromptcard %} +{% promptcard Sorting and Swimlane %} +#SyncfusionVueAssistant Create a Kanban board with swimlane grouping and sortable cards. +{% endpromptcard %} +{% promptcard Editable Cards and Localization %} +#SyncfusionVueAssistant Show me how to edit cards and apply localization in Kanban. +{% endpromptcard %} +{% promptcard Troubleshooting Kanban Drag and Drop %} +#SyncfusionVueAssistant Why isn’t drag-and-drop working correctly in my Kanban board? +{% endpromptcard %} +{% promptcard Remote Data and Virtualization %} +#SyncfusionVueAssistant Bind remote data to Kanban and enable virtualization for performance. +{% endpromptcard %} +{% promptcard Advanced Kanban Setup %} +#SyncfusionVueAssistant Create a Kanban board with data binding, swimlane, card editing, and drag-and-drop. +{% endpromptcard %} +{% endpromptcards %} + +### RichTextEditor + +The Syncfusion Vue RichTextEditor offers a modern WYSIWYG editor with extensive formatting, media, and integration features. + +{% promptcards %} +{% promptcard Toolbar Configuration %} +#SyncfusionVueAssistant How do I customize the toolbar options in the Syncfusion RichTextEditor? +{% endpromptcard %} +{% promptcard Link Manipulation %} +#SyncfusionVueAssistant Show me how to add, edit, and remove hyperlinks in RichTextEditor content. +{% endpromptcard %} +{% promptcard Iframe Mode %} +#SyncfusionVueAssistant How can I render the RichTextEditor inside an iframe for isolated styling? +{% endpromptcard %} +{% promptcard Module Injection %} +#SyncfusionVueAssistant Inject feature modules like toolbar, link, and image into RichTextEditor. +{% endpromptcard %} +{% promptcard Undo and Redo %} +#SyncfusionVueAssistant Enable undo and redo functionality in the RichTextEditor toolbar. +{% endpromptcard %} +{% promptcard Forms Integration %} +#SyncfusionVueAssistant How do I integrate a Vue form and validate input? +{% endpromptcard %} +{% promptcard Content Import and Export %} +#SyncfusionVueAssistant Export RichTextEditor content to HTML or import existing HTML content. +{% endpromptcard %} +{% promptcard Advanced Toolbar %} +#SyncfusionVueAssistant Create a RichTextEditor with toolbar options for formatting, links, and undo/redo. +{% endpromptcard %} +{% promptcard Iframe and Forms Support %} +#SyncfusionVueAssistant Use RichTextEditor in iframe mode and bind it to a form for submission. +{% endpromptcard %} +{% promptcard Undo/Redo and Export %} +#SyncfusionVueAssistant Enable undo/redo and export content to HTML in RichTextEditor. +{% endpromptcard %} +{% promptcard Module Injection and Link Editing %} +#SyncfusionVueAssistant Inject toolbar and link modules to enable rich link editing in the editor. +{% endpromptcard %} +{% endpromptcards %} + +### Calendar + +The Syncfusion Vue Calendar supports flexible date selection, localization, and custom rendering. + +{% promptcards %} +{% promptcard Date Range Selection %} +#SyncfusionVueAssistant How do I enable date range selection in the Syncfusion Vue Calendar? +{% endpromptcard %} +{% promptcard Globalization Support %} +#SyncfusionVueAssistant Configure the Calendar to support multiple cultures and languages. +{% endpromptcard %} +{% promptcard Multi-Date Selection %} +#SyncfusionVueAssistant Show me how to allow users to select multiple dates in the Calendar. +{% endpromptcard %} +{% promptcard Islamic Calendar Support %} +#SyncfusionVueAssistant How can I switch the Calendar to use the Islamic calendar system? +{% endpromptcard %} +{% promptcard Skip Months Feature %} +#SyncfusionVueAssistant Enable skipping months in the Calendar navigation for faster browsing. +{% endpromptcard %} +{% promptcard Calendar Showing Other Month Days %} +#SyncfusionVueAssistant How do I show days from adjacent months in the current Calendar view? +{% endpromptcard %} +{% promptcard Custom Day Cell Format %} +#SyncfusionVueAssistant Customize the day cell format in the Calendar to show short weekday names. +{% endpromptcard %} +{% promptcard Calendar Highlighting Weekends %} +#SyncfusionVueAssistant Highlight weekends in the Calendar with a different background color. +{% endpromptcard %} +{% promptcard Globalization and Islamic Calendar %} +#SyncfusionVueAssistant Configure the Calendar for Arabic culture using Islamic calendar and localization. +{% endpromptcard %} +{% promptcard Multi-Selection and Range %} +#SyncfusionVueAssistant Enable both multi-date selection and range selection in the Calendar. +{% endpromptcard %} +{% promptcard Troubleshooting Calendar Date Range %} +#SyncfusionVueAssistant Why isn’t my Calendar selecting the correct date range? +{% endpromptcard %} +{% promptcard Advanced Calendar Setup %} +#SyncfusionVueAssistant Create a Calendar with date range, multi-selection, globalization, and weekend highlights. +{% endpromptcard %} +{% endpromptcards %} + +## See also + +* [AI Coding Assistant Overview](https://ej2.syncfusion.com/vue/documentation/ai-coding-assistant/overview) +* [SyncfusionVueAssistant MCP Server](https://ej2.syncfusion.com/vue/documentation/ai-coding-assistant/mcp-server) diff --git a/ej2-vue/chart/axis-labels.md b/ej2-vue/chart/axis-labels.md index bfbee86ef..32a203dd6 100644 --- a/ej2-vue/chart/axis-labels.md +++ b/ej2-vue/chart/axis-labels.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## ## Smart Axis Labels -When the axis labels overlap with each other, you can use [`labelIntersectAction`](https://ej2.syncfusion.com/vue/documentation/api/chart/axis/#labelintersectaction) property in the axis, to place them smartly. +When the axis labels overlap with each other, you can use [`labelIntersectAction`](https://ej2.syncfusion.com/vue/documentation/api/chart/axis#labelintersectaction) property in the axis, to place them smartly. When setting `labelIntersectAction` as `Hide` @@ -160,7 +160,7 @@ are `Rectangle`, `Brace`, `WithoutBorder`, `WithoutTopBorder`, `WithoutTopandBot ## Edge Label Placement -Labels with long text at the edges of an axis may appear partially in the chart. To avoid this, use [`edgeLabelPlacement`](https://ej2.syncfusion.com/vue/documentation/api/chart/axisModel/#edgelabelplacement) property in axis, which moves the label inside the chart area for better appearance or hides it. By default, the [`edgeLabelPlacement`](https://ej2.syncfusion.com/vue/documentation/api/chart/axisModel/#edgelabelplacement) property is set to **Shift** to ensure that labels are shifted inside the chart area, avoiding any overlap or coincidence. +Labels with long text at the edges of an axis may appear partially in the chart. To avoid this, use [`edgeLabelPlacement`](https://ej2.syncfusion.com/vue/documentation/api/chart/axisModel#edgelabelplacement) property in axis, which moves the label inside the chart area for better appearance or hides it. By default, the [`edgeLabelPlacement`](https://ej2.syncfusion.com/vue/documentation/api/chart/axisModel#edgelabelplacement) property is set to **Shift** to ensure that labels are shifted inside the chart area, avoiding any overlap or coincidence. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -175,7 +175,7 @@ Labels with long text at the edges of an axis may appear partially in the chart. ## Labels Customization -The [`labelStyle`](https://ej2.syncfusion.com/vue/documentation/api/chart/axis/#labelplacement) property of an axis provides options to customize the +The [`labelStyle`](https://ej2.syncfusion.com/vue/documentation/api/chart/axis#labelplacement) property of an axis provides options to customize the `color`, `font-family`, `font-size` and `font-weight` of the axis labels. {% tabs %} @@ -206,7 +206,7 @@ You can customize the specific text in the axis labels using `axisLabelRender` e ## Trim using maximum label width -You can trim the label using [`enableTrim`](https://ej2.syncfusion.com/vue/documentation/api/chart/axis/#enabletrim) property and width of the labels can also be customized using [`maximumLabelWidth`](https://ej2.syncfusion.com/vue/documentation/api/chart/axis/#maximumlabelwidth) property in the axis, the value maximum label width is `34` by default. +You can trim the label using [`enableTrim`](https://ej2.syncfusion.com/vue/documentation/api/chart/axis#enabletrim) property and width of the labels can also be customized using [`maximumLabelWidth`](https://ej2.syncfusion.com/vue/documentation/api/chart/axis#maximumlabelwidth) property in the axis, the value maximum label width is `34` by default. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -232,4 +232,19 @@ Line break feature used to customize the long axis label text into multiple line {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/chart/axis/category-cs19" %} \ No newline at end of file +{% previewsample "page.domainurl/code-snippet/chart/axis/category-cs19" %} + +## Axis label template + +The axis label template allows you to customize axis labels by formatting them with HTML content, applying conditional styling, and including dynamic elements such as icons, images or additional data. This customization is enabled by setting the template content in the [labelTemplate](https://ej2.syncfusion.com/vue/documentation/api/chart/axismodel#labelTemplate) property of the `AxisModel`. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/chart/axis/category-cs46/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/chart/axis/category-cs46/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chart/axis/category-cs46" %} \ No newline at end of file diff --git a/ej2-vue/chart/chart-appearance.md b/ej2-vue/chart/chart-appearance.md index 2fe4c923b..e97f8e7d5 100644 --- a/ej2-vue/chart/chart-appearance.md +++ b/ej2-vue/chart/chart-appearance.md @@ -13,7 +13,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/vue/documentation/api/chart/chartModel/#palettes) property. +using the [`palettes`](https://ej2.syncfusion.com/vue/documentation/api/chart/chartModel#palettes) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -32,7 +32,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/vue/documentation/api/chart/series/#datasource) for the series using [`pointColorMapping`](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#pointcolormapping) property. +You can bind the color for the points from [`dataSource`](https://ej2.syncfusion.com/vue/documentation/api/chart/series#datasource) for the series using [`pointColorMapping`](https://ej2.syncfusion.com/vue/documentation/api/chart/series#pointcolormapping) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -47,7 +47,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/vue/documentation/api/chart/rangeColorSetting/) in the chart. +You can differentiate data points based on their y values using [`rangeColorSettings`](https://ej2.syncfusion.com/vue/documentation/api/chart/rangeColorSetting) in the chart. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -63,8 +63,8 @@ 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/vue/documentation/api/chart/iPointRenderEventArgs/) and -[`textRender`](https://ej2.syncfusion.com/vue/documentation/api/chart/iTextRenderEventArgs/) event. +[`pointRender`](https://ej2.syncfusion.com/vue/documentation/api/chart/iPointRenderEventArgs) and +[`textRender`](https://ej2.syncfusion.com/vue/documentation/api/chart/iTextRenderEventArgs) event. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -86,7 +86,7 @@ Marker, datalabel and fill color of each data point can be customized with **Customize the chart background** -Using [`background`](https://ej2.syncfusion.com/vue/documentation/api/chart/chartModel/#background) and [`border`](https://ej2.syncfusion.com/vue/documentation/api/chart/chartModel/#border) properties, you can change the background color and border of the chart. +Using [`background`](https://ej2.syncfusion.com/vue/documentation/api/chart/chartModel#background) and [`border`](https://ej2.syncfusion.com/vue/documentation/api/chart/chartModel#border) properties, you can change the background color and border of the chart. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -101,7 +101,7 @@ Using [`background`](https://ej2.syncfusion.com/vue/documentation/api/chart/char **Chart margin** -You can set margin for chart from its container through [`margin`](https://ej2.syncfusion.com/vue/documentation/api/chart/margin/) property. +You can set margin for chart from its container through [`margin`](https://ej2.syncfusion.com/vue/documentation/api/chart/margin) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -116,7 +116,7 @@ You can set margin for chart from its container through [`margin`](https://ej2.s **Chart area customization** -Using [`background`](https://ej2.syncfusion.com/vue/documentation/api/chart/chartArea/#background) and [`border`](https://ej2.syncfusion.com/vue/documentation/api/chart/#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/vue/documentation/api/chart/chartArea/#width) property. +Using [`background`](https://ej2.syncfusion.com/vue/documentation/api/chart/chartArea#background) and [`border`](https://ej2.syncfusion.com/vue/documentation/api/chart#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/vue/documentation/api/chart/chartArea#width) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -131,7 +131,7 @@ Using [`background`](https://ej2.syncfusion.com/vue/documentation/api/chart/char **Chart area margin** -You can customize the space between the chart area from its chart container through [`margin`](https://ej2.syncfusion.com/vue/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/vue/documentation/api/chart/chartAreaModel#margin) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -146,7 +146,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/vue/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/vue/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 html tabtitle="Composition API (~/src/App.vue)" %} @@ -172,92 +172,4 @@ Fluid animation used to animate series with updated dataSource continues animati {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/chart/series/column-cs11" %} - -## Chart title - -Chart can be given a title using [`title`](https://ej2.syncfusion.com/vue/documentation/api/chart/chartModel/#title) property, to show the information about the data plotted. - -{% tabs %} -{% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/chart/chart-title-cs5/app-composition.vue %} -{% endhighlight %} -{% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/chart/chart-title-cs5/app.vue %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart/chart-title-cs5" %} - -### Title position - -By using the [`position`](https://ej2.syncfusion.com/vue/documentation/api/chart/titleSettings/#position) property in [`titleStyle`](https://ej2.syncfusion.com/vue/documentation/api/chart/chartModel/#titlestyle), you can position the [`title`](https://ej2.syncfusion.com/vue/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 html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/chart/chart-title-cs8/app-composition.vue %} -{% endhighlight %} -{% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/chart/chart-title-cs8/app.vue %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart/chart-title-cs8" %} - -* The custom option helps you to position the title anywhere in the chart using [`x`](https://ej2.syncfusion.com/vue/documentation/api/chart/titleSettings/#x) and [`y`](https://ej2.syncfusion.com/vue/documentation/api/chart/titleSettings/#y) coordinates. - -{% tabs %} -{% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/chart/chart-title-cs9/app-composition.vue %} -{% endhighlight %} -{% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/chart/chart-title-cs9/app.vue %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart/chart-title-cs9" %} - -### Title alignment - -You can align the title to the near, far, or center of the chart using the [`textAlignment`](https://ej2.syncfusion.com/vue/documentation/api/chart/titleSettings/#textalignment) property. - -{% tabs %} -{% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/chart/chart-title-cs10/app-composition.vue %} -{% endhighlight %} -{% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/chart/chart-title-cs10/app.vue %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart/chart-title-cs10" %} - -## Chart subTitle - -Chart can be given a subtitle using [`subTitle`](https://ej2.syncfusion.com/vue/documentation/api/chart/chartModel/#subtitle) property, to show the information about the data plotted. - -{% tabs %} -{% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/chart/chart-title-cs6/app-composition.vue %} -{% endhighlight %} -{% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/chart/chart-title-cs6/app.vue %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart/chart-title-cs6" %} - -### Title wrap - -Chart can be given a title using [`title`](https://ej2.syncfusion.com/vue/documentation/api/chart/chartModel/#title) property, to show the information about the data plotted. - -{% tabs %} -{% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/chart/chart-title-cs7/app-composition.vue %} -{% endhighlight %} -{% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/chart/chart-title-cs7/app.vue %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart/chart-title-cs7" %} \ No newline at end of file +{% previewsample "page.domainurl/code-snippet/chart/series/column-cs11" %} \ No newline at end of file diff --git a/ej2-vue/chart/data-labels.md b/ej2-vue/chart/data-labels.md index 7e47a16b7..85a37bb35 100644 --- a/ej2-vue/chart/data-labels.md +++ b/ej2-vue/chart/data-labels.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Data labels in Vue Chart component -Data label can be added to a chart series by enabling the [`visible`](https://ej2.syncfusion.com/vue/documentation/api/chart/dataLabelSettings/#visible) +Data label can be added to a chart series by enabling the [`visible`](https://ej2.syncfusion.com/vue/documentation/api/chart/dataLabelSettings#visible) option in the dataLabel. By default, the labels will arrange smartly without overlapping. {% tabs %} @@ -28,7 +28,7 @@ option in the dataLabel. By default, the labels will arrange smartly without o ## Position -Using [`position`](https://ej2.syncfusion.com/vue/documentation/api/chart/dataLabelSettings/#position) property, you can place the label either on +Using [`position`](https://ej2.syncfusion.com/vue/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 %} @@ -46,7 +46,7 @@ Using [`position`](https://ej2.syncfusion.com/vue/documentation/api/chart/dataLa ## 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.y}` to display corresponding data points x & y value. Using [`template`](https://ej2.syncfusion.com/vue/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.y}` to display corresponding data points x & y value. Using [`template`](https://ej2.syncfusion.com/vue/documentation/api/chart/dataLabelSettings#template) property, you can set data label template in chart. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -76,7 +76,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/vue/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/vue/documentation/api/chart/dataLabelSettings#format) property. You can use the global formatting options, such as 'n', 'p', and 'c'. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -195,7 +195,7 @@ can be customized using `rx` and `ry` properties. ## Customizing Specific Point -You can also customize the specific marker and label using [`pointRender`](https://ej2.syncfusion.com/vue/documentation/api/chart/iPointRenderEventArgs/)and[`textRender`](https://ej2.syncfusion.com/vue/documentation/api/chart/iTextRenderEventArgs/) 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/vue/documentation/api/chart/iPointRenderEventArgs)and[`textRender`](https://ej2.syncfusion.com/vue/documentation/api/chart/iTextRenderEventArgs) 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 html tabtitle="Composition API (~/src/App.vue)" %} @@ -221,4 +221,40 @@ You can calculate the percentage value based on the sum for each series using th {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/chart/data-marker/datalabel-cs9" %} \ No newline at end of file +{% previewsample "page.domainurl/code-snippet/chart/data-marker/datalabel-cs9" %} + +## Last value label in Vue 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 html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/chart/last-value-label/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/chart/last-value-label/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chart/last-value-label" %} + +> Note: To use the last value label feature, inject `LastValueLabel` module into the `provide`. + +### 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 html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/chart/last-value-label-customization/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/chart/last-value-label-customization/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chart/last-value-label-customization" %} \ No newline at end of file diff --git a/ej2-vue/chart/lastvaluelabel.md b/ej2-vue/chart/lastvaluelabel.md deleted file mode 100644 index d2c7f92eb..000000000 --- a/ej2-vue/chart/lastvaluelabel.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -layout: post -title: Last value label in Vue Chart component | Syncfusion -description: Learn here all about Last value label in Syncfusion Vue Chart component of Syncfusion Essential JS 2 and more. -control: Last value label -platform: ej2-vue -documentation: ug -domainurl: ##DomainURL## ---- - -# Last value label in Vue 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 html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/chart/last-value-label/app-composition.vue %} -{% endhighlight %} -{% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/chart/last-value-label/app.vue %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart/last-value-label" %} - -> Note: To use the last value label feature, inject `LastValueLabel` module into the `provide`. - -## 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 html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/chart/last-value-label-customization/app-composition.vue %} -{% endhighlight %} -{% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/chart/last-value-label-customization/app.vue %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart/last-value-label-customization" %} \ No newline at end of file diff --git a/ej2-vue/chart/selection.md b/ej2-vue/chart/selection.md index b0c7a7701..2532a129c 100644 --- a/ej2-vue/chart/selection.md +++ b/ej2-vue/chart/selection.md @@ -84,7 +84,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/vue/documentation/api/chart/iDragCompleteEventArgs/) +The selected data’s are returned as an array collection in the [`dragComplete`](https://ej2.syncfusion.com/vue/documentation/api/chart/iDragCompleteEventArgs) event. {% tabs %} @@ -130,7 +130,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/vue/documentation/api/chart/chartModel/#ismultiselect) property. +You can select multiple points or series, by enabling the [`isMultiSelect`](https://ej2.syncfusion.com/vue/documentation/api/chart/chartModel#ismultiselect) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -145,7 +145,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/vue/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/vue/documentation/api/chart/chartModel#selecteddataindexes) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -160,7 +160,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/vue/documentation/api/chart/legendSettingsModel/#toggleVisibility) property. Also, use [`enableHighlight`](https://ej2.syncfusion.com/vue/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/vue/documentation/api/chart/legendSettingsModel#toggleVisibility) property. Also, use [`enableHighlight`](https://ej2.syncfusion.com/vue/documentation/api/chart/legendSettings#enableHighlight) property for highlighting the series through legend. + +>When [`highlightMode`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/highlightmode) is set to 'Series', 'Cluster' or 'Point', legend highlighting will still occur even when [`enableHighlight`](https://ej2.syncfusion.com/vue/documentation/api/chart/legendSettings#enableHighlight) is set to false. This is because, the [`highlightMode`](https://ej2.syncfusion.com/vue/documentation/api/stock-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/vue/documentation/api/chart/legendSettings#enableHighlight) setting. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -175,7 +177,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/vue/documentation/api/chart/series/#selectionstyle) property. +You can apply custom style to selected points or series with [`selectionStyle`](https://ej2.syncfusion.com/vue/documentation/api/chart/series#selectionstyle) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/ej2-vue/chart/title-subtitle.md b/ej2-vue/chart/title-subtitle.md new file mode 100644 index 000000000..16f28a07b --- /dev/null +++ b/ej2-vue/chart/title-subtitle.md @@ -0,0 +1,99 @@ +--- +layout: post +title: Chart title in Vue Chart component | Syncfusion +description: Learn here all about Chart title in Syncfusion Vue Chart component of Syncfusion Essential JS 2 and more. +control: Chart title +platform: ej2-vue +documentation: ug +domainurl: ##DomainURL## +--- + +# Title and Subtitle in Vue Chart component + +## Chart title + +Chart can be given a title using [`title`](https://ej2.syncfusion.com/vue/documentation/api/chart/chartModel#title) property, to show the information about the data plotted. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/chart/chart-title-cs5/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/chart/chart-title-cs5/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chart/chart-title-cs5" %} + +### Title position + +By using the [`position`](https://ej2.syncfusion.com/vue/documentation/api/chart/titleSettings#position) property in [`titleStyle`](https://ej2.syncfusion.com/vue/documentation/api/chart/chartModel#titlestyle), you can position the [`title`](https://ej2.syncfusion.com/vue/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 html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/chart/chart-title-cs8/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/chart/chart-title-cs8/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chart/chart-title-cs8" %} + +* The custom option helps you to position the title anywhere in the chart using [`x`](https://ej2.syncfusion.com/vue/documentation/api/chart/titleSettings#x) and [`y`](https://ej2.syncfusion.com/vue/documentation/api/chart/titleSettings#y) coordinates. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/chart/chart-title-cs9/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/chart/chart-title-cs9/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chart/chart-title-cs9" %} + +### Title alignment + +You can align the title to the near, far, or center of the chart using the [`textAlignment`](https://ej2.syncfusion.com/vue/documentation/api/chart/titleSettings#textalignment) property. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/chart/chart-title-cs10/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/chart/chart-title-cs10/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chart/chart-title-cs10" %} + +## Chart subTitle + +Chart can be given a subtitle using [`subTitle`](https://ej2.syncfusion.com/vue/documentation/api/chart/chartModel#subtitle) property, to show the information about the data plotted. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/chart/chart-title-cs6/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/chart/chart-title-cs6/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chart/chart-title-cs6" %} + +### Title wrap + +Chart can be given a title using [`title`](https://ej2.syncfusion.com/vue/documentation/api/chart/chartModel#title) property, to show the information about the data plotted. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/chart/chart-title-cs7/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/chart/chart-title-cs7/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chart/chart-title-cs7" %} \ No newline at end of file diff --git a/ej2-vue/chart/understanding-chart.md b/ej2-vue/chart/understanding-chart.md new file mode 100644 index 000000000..20691dc50 --- /dev/null +++ b/ej2-vue/chart/understanding-chart.md @@ -0,0 +1,38 @@ +--- +layout: post +title: Understanding Vue Chart component | Syncfusion +description: Explore and understand the Syncfusion Vue Chart component in Essential JS 2 and discover its powerful features. +control: Understanding +platform: ej2-vue +documentation: ug +domainurl: ##DomainURL## +--- + +# Understanding of Vue Chart + +To understand how Syncfusion Vue Chart works, it is important to learn about the various parts of a chart. +The image below illustrates the main elements of the chart. +
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-vue/code-snippet/ai-assistview/toolbar-items/footer-position/app-composition.vue b/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-position/app-composition.vue
new file mode 100644
index 000000000..f120b2f70
--- /dev/null
+++ b/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-position/app-composition.vue
@@ -0,0 +1,58 @@
+
+ ++ + + + + diff --git a/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-position/app.vue b/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-position/app.vue new file mode 100644 index 000000000..38de7f5bf --- /dev/null +++ b/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-position/app.vue @@ -0,0 +1,62 @@ + +
+ ++ ++ + + diff --git a/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-position/index.css b/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-position/index.css new file mode 100644 index 000000000..fd40910d9 --- /dev/null +++ b/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-position/index.css @@ -0,0 +1,4 @@ + + + + diff --git a/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-position/index.html b/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-position/index.html new file mode 100644 index 000000000..ec92199d1 --- /dev/null +++ b/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-position/index.html @@ -0,0 +1,21 @@ + + + + + +
+ ++ EJ2 Vue Sample + + + + + + + + + + + +Loading....+ + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-position/index.js b/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-position/index.js new file mode 100644 index 000000000..492099ecf --- /dev/null +++ b/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-position/index.js @@ -0,0 +1,40 @@ +import Vue from 'vue'; +import { AIAssistViewPlugin } from "@syncfusion/ej2-vue-interactive-chat"; +Vue.use(AIAssistViewPlugin); + +new Vue({ + el: '#app', + template: ` +++`, + + data: function () { + return { + promptsData: [ + { + prompt: "What is AI?", + response: `
++ AI stands for Artificial Intelligence, enabling machines to mimic human intelligence for tasks such as learning, problem-solving, and decision-making.` + } + ], + promptToolbarSettings: { + items: [ + { type: 'Button', iconCss: 'e-icons e-edit' } + ] + } + } + }, + methods: { + onPromptRequest(args) { + setTimeout(() => { + let defaultAiassist = this.$refs.aiassist.ej2Instances; + let foundPrompt = this.promptsData.find((promptObj) => promptObj.prompt === args.prompt); + let defaultResponse = 'For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.'; + defaultAiassist.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse); + }, 1000); + } + } + +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-position/systemjs.config.js b/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-position/systemjs.config.js new file mode 100644 index 000000000..c41d83097 --- /dev/null +++ b/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-position/systemjs.config.js @@ -0,0 +1,37 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-interactive-chat": "syncfusion:ej2-vue-interactive-chat/dist/ej2-vue-interactive-chat.umd.min.js", + "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js", + "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js", + "@syncfusion/ej2-vue-notifications": "syncfusion:ej2-vue-notifications/dist/ej2-vue-notifications.umd.min.js" + } +}); + +System.import('index.js'); diff --git a/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-settings/app-composition.vue b/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-settings/app-composition.vue new file mode 100644 index 000000000..5652edecf --- /dev/null +++ b/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-settings/app-composition.vue @@ -0,0 +1,42 @@ + +++ + + + + diff --git a/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-settings/app.vue b/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-settings/app.vue new file mode 100644 index 000000000..f55e3b5ce --- /dev/null +++ b/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-settings/app.vue @@ -0,0 +1,47 @@ + +
++ ++ + + diff --git a/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-settings/index.css b/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-settings/index.css new file mode 100644 index 000000000..fd40910d9 --- /dev/null +++ b/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-settings/index.css @@ -0,0 +1,4 @@ + + + + diff --git a/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-settings/index.html b/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-settings/index.html new file mode 100644 index 000000000..ec92199d1 --- /dev/null +++ b/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-settings/index.html @@ -0,0 +1,21 @@ + + + + + +
++ EJ2 Vue Sample + + + + + + + + + + + +Loading....+ + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-settings/index.js b/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-settings/index.js new file mode 100644 index 000000000..492099ecf --- /dev/null +++ b/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-settings/index.js @@ -0,0 +1,40 @@ +import Vue from 'vue'; +import { AIAssistViewPlugin } from "@syncfusion/ej2-vue-interactive-chat"; +Vue.use(AIAssistViewPlugin); + +new Vue({ + el: '#app', + template: ` +++`, + + data: function () { + return { + promptsData: [ + { + prompt: "What is AI?", + response: `
++ AI stands for Artificial Intelligence, enabling machines to mimic human intelligence for tasks such as learning, problem-solving, and decision-making.` + } + ], + promptToolbarSettings: { + items: [ + { type: 'Button', iconCss: 'e-icons e-edit' } + ] + } + } + }, + methods: { + onPromptRequest(args) { + setTimeout(() => { + let defaultAiassist = this.$refs.aiassist.ej2Instances; + let foundPrompt = this.promptsData.find((promptObj) => promptObj.prompt === args.prompt); + let defaultResponse = 'For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.'; + defaultAiassist.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse); + }, 1000); + } + } + +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-settings/systemjs.config.js b/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-settings/systemjs.config.js new file mode 100644 index 000000000..c41d83097 --- /dev/null +++ b/ej2-vue/code-snippet/ai-assistview/toolbar-items/footer-settings/systemjs.config.js @@ -0,0 +1,37 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-interactive-chat": "syncfusion:ej2-vue-interactive-chat/dist/ej2-vue-interactive-chat.umd.min.js", + "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js", + "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js", + "@syncfusion/ej2-vue-notifications": "syncfusion:ej2-vue-notifications/dist/ej2-vue-notifications.umd.min.js" + } +}); + +System.import('index.js'); diff --git a/ej2-vue/code-snippet/chart/axis/category-cs46/app-composition.vue b/ej2-vue/code-snippet/chart/axis/category-cs46/app-composition.vue new file mode 100644 index 000000000..fcb568187 --- /dev/null +++ b/ej2-vue/code-snippet/chart/axis/category-cs46/app-composition.vue @@ -0,0 +1,52 @@ + +++ + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/chart/axis/category-cs46/app.vue b/ej2-vue/code-snippet/chart/axis/category-cs46/app.vue new file mode 100644 index 000000000..a06fc86f3 --- /dev/null +++ b/ej2-vue/code-snippet/chart/axis/category-cs46/app.vue @@ -0,0 +1,64 @@ + ++ + +++ ++
++ +Country : +${label} ++ ++ + +++ ++
++ +Country : +${label} ++ +EJ2 Vue Sample + + + + + + + + + + + +Loading....+ + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/chart/axis/category-cs46/index.js b/ej2-vue/code-snippet/chart/axis/category-cs46/index.js new file mode 100644 index 000000000..f709a9d9e --- /dev/null +++ b/ej2-vue/code-snippet/chart/axis/category-cs46/index.js @@ -0,0 +1,59 @@ +import Vue from "vue"; +import { ChartPlugin, ColumnSeries, Category, Legend } from "@syncfusion/ej2-vue-charts"; + +Vue.use(ChartPlugin); + +; +new Vue({ + el: '#app', + template: ` +++`, + + data() { + return { + seriesData: [ + { country: "USA", gold: 50, silver: 70, bronze: 45 }, + { country: "China", gold: 40, silver: 60, bronze: 55 }, + { country: "Japan", gold: 70, silver: 60, bronze: 50 }, + { country: "Australia", gold: 60, silver: 56, bronze: 40 }, + { country: "France", gold: 50, silver: 45, bronze: 35 }, + { country: "Germany", gold: 40, silver: 30, bronze: 22 }, + { country: "Italy", gold: 40, silver: 35, bronze: 37 }, + { country: "Sweden", gold: 30, silver: 25, bronze: 27 } + ], + primaryXAxis: { + valueType: 'Category', + title: 'Countries' + }, + primaryYAxis: { + minimum: 0, + maximum: 80, + interval: 20, + title: 'Medals' + }, + legendSettings: { + visible: true, + layout: "Auto", + maximumColumns: 3, + fixedWidth: true + }, + title: "Olympic Medals" + }; + }, + provide: { + chart: [ColumnSeries, Category, Legend ] + } + +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/chart/axis/category-cs46/systemjs.config.js b/ej2-vue/code-snippet/chart/axis/category-cs46/systemjs.config.js new file mode 100644 index 000000000..4e49def88 --- /dev/null +++ b/ej2-vue/code-snippet/chart/axis/category-cs46/systemjs.config.js @@ -0,0 +1,41 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js", + "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js", + "@syncfusion/ej2-vue-charts": "syncfusion:ej2-vue-charts/dist/ej2-vue-charts.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.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-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js" + } +}); + +System.import('index.js'); \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/app-composition.vue b/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/app-composition.vue new file mode 100644 index 000000000..1d5601b4a --- /dev/null +++ b/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/app-composition.vue @@ -0,0 +1,52 @@ + ++ ++ ++ ++ ++ + + + ++ + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/datasource.js b/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/datasource.js new file mode 100644 index 000000000..3e9415f52 --- /dev/null +++ b/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/datasource.js @@ -0,0 +1,285 @@ +define(["require", "exports"], function (require, exports) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.data = [ + { + OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), + ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', + ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0 + }, + { + OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6), + ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48', + ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1 + }, + { + OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0 + }, + { + OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5), + ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce', + ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0 + }, + { + OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 2, OrderDate: new Date(8368506e5), + ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255', + ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0 + }, + { + OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0 + }, + { + OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5), + ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31', + ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1 + }, + { + OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5), + ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5', + ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0 + }, + { + OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6), + ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12', + ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1 + }, + { + OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5), + ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35', + ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0 + }, + { + OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5), + ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6', + ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0 + }, + { + OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5), + ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993', + ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1 + }, + { + OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5), + ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369', + ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0 + }, + { + OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5), + ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12', + ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1 + }, + { + OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5), + ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.', + ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0 + }]; + exports.employeeData = [{ + 'EmployeeID': 1, + 'LastName': 'Davolio', + 'FirstName': 'Nancy', + 'Title': 'Sales Representative', + 'TitleOfCourtesy': 'Ms.', + 'BirthDate': new Date(-664743600000), + 'HireDate': new Date(704692800000), + 'Address': '507 - 20th Ave. E.\r\nApt. 2A', + 'City': 'Seattle', + 'Region': 'WA', + 'PostalCode': '98122', + 'Country': 'USA', + 'HomePhone': '(206) 555-9857', + 'Extension': '5467', + 'Photo': { 'Length': 21626 }, + + 'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\ + \'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.', + 'ReportsTo': 2, + 'PhotoPath': 'http://accweb/emmployees/davolio.bmp' + }, + { + 'EmployeeID': 2, + 'LastName': 'Fuller', + 'FirstName': 'Andrew', + 'Title': 'Vice President, Sales', + 'TitleOfCourtesy': 'Dr.', + 'BirthDate': new Date(-563828400000), + 'HireDate': new Date(713764800000), + 'Address': '908 W. Capital Way', + 'City': 'Tacoma', + 'Region': 'WA', + 'PostalCode': '98401', + 'Country': 'USA', + 'HomePhone': '(206) 555-9482', + 'Extension': '3457', + 'Photo': { 'Length': 21626 }, + + 'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \ + Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \ + was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \ + Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.', + 'ReportsTo': 0, + 'PhotoPath': 'http://accweb/emmployees/fuller.bmp' + }, + { + 'EmployeeID': 3, + 'LastName': 'Leverling', + 'FirstName': 'Janet', + 'Title': 'Sales Representative', + 'TitleOfCourtesy': 'Ms.', + 'BirthDate': new Date(-200088000000), + 'HireDate': new Date(702104400000), + 'Address': '722 Moss Bay Blvd.', + 'City': 'Kirkland', + 'Region': 'WA', + 'PostalCode': '98033', + 'Country': 'USA', + 'HomePhone': '(206) 555-3412', + 'Extension': '3355', + 'Photo': { 'Length': 21722 }, + + 'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \ + She has also completed a certificate program in food retailing management.\ + Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.', + 'ReportsTo': 2, + 'PhotoPath': 'http://accweb/emmployees/leverling.bmp' + }, + { + 'EmployeeID': 4, + 'LastName': 'Peacock', + 'FirstName': 'Margaret', + 'Title': 'Sales Representative', + 'TitleOfCourtesy': 'Mrs.', + 'BirthDate': new Date(-1018814400000), + 'HireDate': new Date(736401600000), + 'Address': '4110 Old Redmond Rd.', + 'City': 'Redmond', + 'Region': 'WA', + 'PostalCode': '98052', + 'Country': 'USA', + 'HomePhone': '(206) 555-8122', + 'Extension': '5176', + 'Photo': { 'Length': 21626 }, + + 'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \ + Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.', + 'ReportsTo': 2, + 'PhotoPath': 'http://accweb/emmployees/peacock.bmp' + }, + { + 'EmployeeID': 5, + 'LastName': 'Buchanan', + 'FirstName': 'Steven', + 'Title': 'Sales Manager', + 'TitleOfCourtesy': 'Mr.', + 'BirthDate': new Date(-468010800000), + 'HireDate': new Date(750830400000), + 'Address': '14 Garrett Hill', + 'City': 'London', + 'Region': null, + 'PostalCode': + 'SW1 8JR', + 'Country': 'UK', + 'HomePhone': '(71) 555-4848', + 'Extension': '3453', + 'Photo': { 'Length': 21626 }, + + 'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \ + a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \ + post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \ + Telemarketing\' and \'International Sales Management.\' He is fluent in French.', + 'ReportsTo': 2, + 'PhotoPath': 'http://accweb/emmployees/buchanan.bmp' + }, + { + 'EmployeeID': 6, + 'LastName': 'Suyama', + 'FirstName': 'Michael', + 'Title': 'Sales Representative', + 'TitleOfCourtesy': 'Mr.', + 'BirthDate': new Date(-205185600000), + 'HireDate': new Date(750830400000), + 'Address': 'Coventry House\r\nMiner Rd.', + 'City': 'London', + 'Region': null, + 'PostalCode': 'EC2 7JR', + 'Country': 'UK', + 'HomePhone': '(71) 555-7773', + 'Extension': '428', + 'Photo': { 'Length': 21626 }, + + 'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \ + (MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \ + He is fluent in Japanese and can read and write French, Portuguese, and Spanish.', + 'ReportsTo': 5, + 'PhotoPath': 'http://accweb/emmployees/davolio.bmp' + }, + { + 'EmployeeID': 7, + 'LastName': 'King', + 'FirstName': 'Robert', + 'Title': 'Sales Representative', + 'TitleOfCourtesy': 'Mr.', + 'BirthDate': new Date(-302731200000), + 'HireDate': new Date(757486800000), + 'Address': 'Edgeham Hollow\r\nWinchester Way', + 'City': 'London', + 'Region': null, + 'PostalCode': 'RG1 9SP', + 'Country': 'UK', + 'HomePhone': '(71) 555-5598', + 'Extension': '465', + 'Photo': { 'Length': 21626 }, + + 'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \ + University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \ + he was transferred to the London office in March 1993.', + 'ReportsTo': 5, + 'PhotoPath': 'http://accweb/emmployees/davolio.bmp' + }, + { + 'EmployeeID': 8, + 'LastName': 'Callahan', + 'FirstName': 'Laura', + 'Title': 'Inside Sales Coordinator', + 'TitleOfCourtesy': 'Ms.', + 'BirthDate': new Date(-377982000000), + 'HireDate': new Date(762843600000), + 'Address': '4726 - 11th Ave. N.E.', + 'City': 'Seattle', + 'Region': 'WA', + 'PostalCode': '98105', + 'Country': 'USA', + 'HomePhone': '(206) 555-1189', + 'Extension': '2344', + 'Photo': { 'Length': 21626 }, + + 'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \ + French. She reads and writes French.', + 'ReportsTo': 2, + 'PhotoPath': 'http://accweb/emmployees/davolio.bmp' + }, + { + 'EmployeeID': 9, + 'LastName': 'Dodsworth', + 'FirstName': 'Anne', + 'Title': 'Sales Representative', + 'TitleOfCourtesy': 'Ms.', + 'BirthDate': new Date(-123966000000), + 'HireDate': new Date(784875600000), + 'Address': '7 Houndstooth Rd.', + 'City': 'London', + 'Region': null, + 'PostalCode': 'WG2 7LT', + 'Country': 'UK', + 'HomePhone': '(71) 555-4444', + 'Extension': '452', + 'Photo': { 'Length': 21626 }, + + 'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.', + 'ReportsTo': 5, + 'PhotoPath': 'http://accweb/emmployees/davolio.bmp' + }]; +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/index.html b/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/index.html new file mode 100644 index 000000000..f27842a53 --- /dev/null +++ b/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/index.html @@ -0,0 +1,22 @@ + + + + + + ++ ++ ++ + + + EJ2 Vue Sample + + + + + + + + + + +Loading....+ + + + diff --git a/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/index.js b/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/index.js new file mode 100644 index 000000000..0f826da12 --- /dev/null +++ b/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/index.js @@ -0,0 +1,57 @@ + +import Vue from "vue"; +import { GridPlugin, DetailRow } from "@syncfusion/ej2-vue-grids"; +import { data, employeeData } from './datasource.js'; + +Vue.use(GridPlugin); + + +new Vue({ + el: '#app', + template: ` +++`, + + data() { + return { + parentData: employeeData, + childGrid: { + dataSource: data, + queryString: 'EmployeeID', + columns: [ + { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 }, + { field: 'CustomerID', headerText: 'Customer ID', width: 150 }, + { field: 'ShipCity', headerText: 'Ship City', width: 150 }, + { field: 'ShipName', headerText: 'Ship Name', width: 150 } + ] + } + } + }, + methods: { + // Prevent expanding detail row. + detailExpand: function(args){ + if (args.data.FirstName === 'Nancy') { + args.cancel = true; + } + }, + // Prevent collapsing detail row. + detailCollapse: function(args){ + if (args.data.FirstName === 'Andrew') { + args.cancel = true; + } + } + }, + provide: { + grid: [DetailRow] + } + +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/systemjs.config.js b/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/systemjs.config.js new file mode 100644 index 000000000..9fc004334 --- /dev/null +++ b/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/systemjs.config.js @@ -0,0 +1,41 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/31.2.12/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", +vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-dropdowns":"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + + "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js", + "@syncfusion/ej2-vue-grids": "syncfusion:ej2-vue-grids/dist/ej2-vue-grids.umd.min.js", + } +}); + +System.import('index.js'); \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/app-composition.vue b/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/app-composition.vue new file mode 100644 index 000000000..24ed28ff6 --- /dev/null +++ b/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/app-composition.vue @@ -0,0 +1,47 @@ + ++ ++ ++ + + + ++ + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/app.vue b/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/app.vue new file mode 100644 index 000000000..bbf1e80d2 --- /dev/null +++ b/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/app.vue @@ -0,0 +1,61 @@ + ++ ++ ++ + + + + + + ++ + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/datasource.js b/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/datasource.js new file mode 100644 index 000000000..bb814af6b --- /dev/null +++ b/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/datasource.js @@ -0,0 +1,3999 @@ +define(["require", "exports"], function (require, exports) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + +exports.ordersTrackData = [ + { + "OrderID": "ORD1001", + "CustomerName": "Eve Green", + "Product": "Laptop", + "Status": "Shipped", + "OrderDate": new Date("2025-04-25"), + "Amount": "$148.14" + }, + { + "OrderID": "ORD1002", + "CustomerName": "Jack Black", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-01-17"), + "Amount": "$39.50" + }, + { + "OrderID": "ORD1003", + "CustomerName": "David Brown", + "Product": "Shoes", + "Status": "Pending", + "OrderDate": new Date("2025-10-15"), + "Amount": "$206.85" + }, + { + "OrderID": "ORD1004", + "CustomerName": "Olivia Purple", + "Product": "Headphones", + "Status": "Cancelled", + "OrderDate": new Date("2025-10-29"), + "Amount": "$285.41" + }, + { + "OrderID": "ORD1005", + "CustomerName": "Alice Johnson", + "Product": "Tablet", + "Status": "Delivered", + "OrderDate": new Date("2025-05-23"), + "Amount": "$163.92" + }, + { + "OrderID": "ORD1006", + "CustomerName": "Grace Lee", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-19"), + "Amount": "$365.39" + }, + { + "OrderID": "ORD1007", + "CustomerName": "Noah Green", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-08-24"), + "Amount": "$540.87" + }, + { + "OrderID": "ORD1008", + "CustomerName": "Henry Taylor", + "Product": "Shoes", + "Status": "Delivered", + "OrderDate": new Date("2025-11-18"), + "Amount": "$622.33" + }, + { + "OrderID": "ORD1009", + "CustomerName": "Kelly Gray", + "Product": "Headphones", + "Status": "Pending", + "OrderDate": new Date("2025-01-24"), + "Amount": "$664.65" + }, + { + "OrderID": "ORD1010", + "CustomerName": "Henry Taylor", + "Product": "Headphones", + "Status": "Pending", + "OrderDate": new Date("2025-07-14"), + "Amount": "$285.19" + }, + { + "OrderID": "ORD1011", + "CustomerName": "Alice Johnson", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-04-18"), + "Amount": "$673.47" + }, + { + "OrderID": "ORD1012", + "CustomerName": "Noah Green", + "Product": "Watch", + "Status": "Shipped", + "OrderDate": new Date("2025-03-25"), + "Amount": "$467.64" + }, + { + "OrderID": "ORD1013", + "CustomerName": "Jack Black", + "Product": "Headphones", + "Status": "Delivered", + "OrderDate": new Date("2025-01-29"), + "Amount": "$236.76" + }, + { + "OrderID": "ORD1014", + "CustomerName": "Mia Blue", + "Product": "Tablet", + "Status": "Delivered", + "OrderDate": new Date("2025-02-03"), + "Amount": "$218.87" + }, + { + "OrderID": "ORD1015", + "CustomerName": "Carol Davis", + "Product": "Camera", + "Status": "Cancelled", + "OrderDate": new Date("2025-11-26"), + "Amount": "$464.26" + }, + { + "OrderID": "ORD1016", + "CustomerName": "Frank Miller", + "Product": "Headphones", + "Status": "Delivered", + "OrderDate": new Date("2025-10-27"), + "Amount": "$434.15" + }, + { + "OrderID": "ORD1017", + "CustomerName": "Rose Pink", + "Product": "Headphones", + "Status": "Shipped", + "OrderDate": new Date("2025-09-18"), + "Amount": "$498.58" + }, + { + "OrderID": "ORD1018", + "CustomerName": "Grace Lee", + "Product": "Watch", + "Status": "Shipped", + "OrderDate": new Date("2025-12-15"), + "Amount": "$427.94" + }, + { + "OrderID": "ORD1019", + "CustomerName": "Quinn Yellow", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-09-28"), + "Amount": "$258.90" + }, + { + "OrderID": "ORD1020", + "CustomerName": "Grace Lee", + "Product": "Shoes", + "Status": "Delivered", + "OrderDate": new Date("2025-11-25"), + "Amount": "$346.77" + }, + { + "OrderID": "ORD1021", + "CustomerName": "Olivia Purple", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-01-02"), + "Amount": "$954.28" + }, + { + "OrderID": "ORD1022", + "CustomerName": "Ivy White", + "Product": "Watch", + "Status": "Pending", + "OrderDate": new Date("2025-11-17"), + "Amount": "$305.46" + }, + { + "OrderID": "ORD1023", + "CustomerName": "Noah Green", + "Product": "Headphones", + "Status": "Shipped", + "OrderDate": new Date("2025-07-11"), + "Amount": "$764.89" + }, + { + "OrderID": "ORD1024", + "CustomerName": "Ivy White", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-09-08"), + "Amount": "$29.28" + }, + { + "OrderID": "ORD1025", + "CustomerName": "Bob Wilson", + "Product": "Headphones", + "Status": "Pending", + "OrderDate": new Date("2025-05-04"), + "Amount": "$879.23" + }, + { + "OrderID": "ORD1026", + "CustomerName": "Henry Taylor", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-09-30"), + "Amount": "$768.18" + }, + { + "OrderID": "ORD1027", + "CustomerName": "Paul Orange", + "Product": "Shoes", + "Status": "Shipped", + "OrderDate": new Date("2025-05-16"), + "Amount": "$532.40" + }, + { + "OrderID": "ORD1028", + "CustomerName": "Carol Davis", + "Product": "Shoes", + "Status": "Shipped", + "OrderDate": new Date("2025-06-09"), + "Amount": "$405.00" + }, + { + "OrderID": "ORD1029", + "CustomerName": "Leo Red", + "Product": "Shoes", + "Status": "Cancelled", + "OrderDate": new Date("2025-03-03"), + "Amount": "$255.43" + }, + { + "OrderID": "ORD1030", + "CustomerName": "Mia Blue", + "Product": "Shirt", + "Status": "Shipped", + "OrderDate": new Date("2025-10-29"), + "Amount": "$228.02" + }, + { + "OrderID": "ORD1031", + "CustomerName": "Jane Smith", + "Product": "Headphones", + "Status": "Pending", + "OrderDate": new Date("2025-01-17"), + "Amount": "$861.04" + }, + { + "OrderID": "ORD1032", + "CustomerName": "Ivy White", + "Product": "Headphones", + "Status": "Delivered", + "OrderDate": new Date("2025-12-09"), + "Amount": "$490.56" + }, + { + "OrderID": "ORD1033", + "CustomerName": "Frank Miller", + "Product": "Book", + "Status": "Cancelled", + "OrderDate": new Date("2025-05-05"), + "Amount": "$786.77" + }, + { + "OrderID": "ORD1034", + "CustomerName": "Carol Davis", + "Product": "Bag", + "Status": "Pending", + "OrderDate": new Date("2025-12-04"), + "Amount": "$436.74" + }, + { + "OrderID": "ORD1035", + "CustomerName": "Olivia Purple", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-12-11"), + "Amount": "$656.92" + }, + { + "OrderID": "ORD1036", + "CustomerName": "Jane Smith", + "Product": "Tablet", + "Status": "Delivered", + "OrderDate": new Date("2025-02-25"), + "Amount": "$256.17" + }, + { + "OrderID": "ORD1037", + "CustomerName": "Jack Black", + "Product": "Camera", + "Status": "Shipped", + "OrderDate": new Date("2025-08-05"), + "Amount": "$191.65" + }, + { + "OrderID": "ORD1038", + "CustomerName": "David Brown", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-10-09"), + "Amount": "$106.93" + }, + { + "OrderID": "ORD1039", + "CustomerName": "Eve Green", + "Product": "Bag", + "Status": "Shipped", + "OrderDate": new Date("2025-03-27"), + "Amount": "$412.35" + }, + { + "OrderID": "ORD1040", + "CustomerName": "Carol Davis", + "Product": "Tablet", + "Status": "Pending", + "OrderDate": new Date("2025-03-26"), + "Amount": "$385.18" + }, + { + "OrderID": "ORD1041", + "CustomerName": "John Doe", + "Product": "Camera", + "Status": "Delivered", + "OrderDate": new Date("2025-08-05"), + "Amount": "$699.63" + }, + { + "OrderID": "ORD1042", + "CustomerName": "Frank Miller", + "Product": "Headphones", + "Status": "Delivered", + "OrderDate": new Date("2025-04-22"), + "Amount": "$969.02" + }, + { + "OrderID": "ORD1043", + "CustomerName": "Jane Smith", + "Product": "Phone", + "Status": "Pending", + "OrderDate": new Date("2025-01-26"), + "Amount": "$588.34" + }, + { + "OrderID": "ORD1044", + "CustomerName": "Ivy White", + "Product": "Watch", + "Status": "Pending", + "OrderDate": new Date("2025-09-18"), + "Amount": "$89.31" + }, + { + "OrderID": "ORD1045", + "CustomerName": "Henry Taylor", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-12-12"), + "Amount": "$863.20" + }, + { + "OrderID": "ORD1046", + "CustomerName": "Grace Lee", + "Product": "Book", + "Status": "Shipped", + "OrderDate": new Date("2025-10-24"), + "Amount": "$598.57" + }, + { + "OrderID": "ORD1047", + "CustomerName": "Olivia Purple", + "Product": "Book", + "Status": "Delivered", + "OrderDate": new Date("2025-05-14"), + "Amount": "$212.22" + }, + { + "OrderID": "ORD1048", + "CustomerName": "David Brown", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-03-09"), + "Amount": "$674.97" + }, + { + "OrderID": "ORD1049", + "CustomerName": "Leo Red", + "Product": "Phone", + "Status": "Pending", + "OrderDate": new Date("2025-01-05"), + "Amount": "$463.70" + }, + { + "OrderID": "ORD1050", + "CustomerName": "Henry Taylor", + "Product": "Shoes", + "Status": "Shipped", + "OrderDate": new Date("2025-09-17"), + "Amount": "$272.55" + }, + { + "OrderID": "ORD1051", + "CustomerName": "Henry Taylor", + "Product": "Headphones", + "Status": "Delivered", + "OrderDate": new Date("2025-05-26"), + "Amount": "$166.17" + }, + { + "OrderID": "ORD1052", + "CustomerName": "Bob Wilson", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-12-08"), + "Amount": "$818.93" + }, + { + "OrderID": "ORD1053", + "CustomerName": "Grace Lee", + "Product": "Watch", + "Status": "Delivered", + "OrderDate": new Date("2025-03-01"), + "Amount": "$890.82" + }, + { + "OrderID": "ORD1054", + "CustomerName": "John Doe", + "Product": "Laptop", + "Status": "Shipped", + "OrderDate": new Date("2025-06-25"), + "Amount": "$211.56" + }, + { + "OrderID": "ORD1055", + "CustomerName": "Ivy White", + "Product": "Camera", + "Status": "Delivered", + "OrderDate": new Date("2025-01-27"), + "Amount": "$101.38" + }, + { + "OrderID": "ORD1056", + "CustomerName": "John Doe", + "Product": "Shirt", + "Status": "Pending", + "OrderDate": new Date("2025-06-20"), + "Amount": "$773.41" + }, + { + "OrderID": "ORD1057", + "CustomerName": "Alice Johnson", + "Product": "Camera", + "Status": "Cancelled", + "OrderDate": new Date("2025-10-15"), + "Amount": "$19.57" + }, + { + "OrderID": "ORD1058", + "CustomerName": "Frank Miller", + "Product": "Shoes", + "Status": "Pending", + "OrderDate": new Date("2025-07-09"), + "Amount": "$586.68" + }, + { + "OrderID": "ORD1059", + "CustomerName": "Olivia Purple", + "Product": "Watch", + "Status": "Pending", + "OrderDate": new Date("2025-06-07"), + "Amount": "$371.01" + }, + { + "OrderID": "ORD1060", + "CustomerName": "Rose Pink", + "Product": "Headphones", + "Status": "Shipped", + "OrderDate": new Date("2025-12-08"), + "Amount": "$111.77" + }, + { + "OrderID": "ORD1061", + "CustomerName": "Noah Green", + "Product": "Watch", + "Status": "Shipped", + "OrderDate": new Date("2025-03-25"), + "Amount": "$976.44" + }, + { + "OrderID": "ORD1062", + "CustomerName": "Olivia Purple", + "Product": "Shirt", + "Status": "Shipped", + "OrderDate": new Date("2025-06-20"), + "Amount": "$784.56" + }, + { + "OrderID": "ORD1063", + "CustomerName": "David Brown", + "Product": "Laptop", + "Status": "Shipped", + "OrderDate": new Date("2025-12-26"), + "Amount": "$117.01" + }, + { + "OrderID": "ORD1064", + "CustomerName": "Paul Orange", + "Product": "Headphones", + "Status": "Shipped", + "OrderDate": new Date("2025-08-24"), + "Amount": "$356.16" + }, + { + "OrderID": "ORD1065", + "CustomerName": "David Brown", + "Product": "Shirt", + "Status": "Shipped", + "OrderDate": new Date("2025-07-24"), + "Amount": "$334.98" + }, + { + "OrderID": "ORD1066", + "CustomerName": "John Doe", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-12-14"), + "Amount": "$981.34" + }, + { + "OrderID": "ORD1067", + "CustomerName": "Mia Blue", + "Product": "Shirt", + "Status": "Pending", + "OrderDate": new Date("2025-05-14"), + "Amount": "$186.78" + }, + { + "OrderID": "ORD1068", + "CustomerName": "Jane Smith", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-06-26"), + "Amount": "$731.26" + }, + { + "OrderID": "ORD1069", + "CustomerName": "Olivia Purple", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-07-17"), + "Amount": "$900.51" + }, + { + "OrderID": "ORD1070", + "CustomerName": "John Doe", + "Product": "Shirt", + "Status": "Cancelled", + "OrderDate": new Date("2025-01-01"), + "Amount": "$524.72" + }, + { + "OrderID": "ORD1071", + "CustomerName": "Carol Davis", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-05"), + "Amount": "$949.39" + }, + { + "OrderID": "ORD1072", + "CustomerName": "Noah Green", + "Product": "Phone", + "Status": "Pending", + "OrderDate": new Date("2025-06-03"), + "Amount": "$512.05" + }, + { + "OrderID": "ORD1073", + "CustomerName": "Mia Blue", + "Product": "Tablet", + "Status": "Delivered", + "OrderDate": new Date("2025-10-11"), + "Amount": "$136.01" + }, + { + "OrderID": "ORD1074", + "CustomerName": "Quinn Yellow", + "Product": "Watch", + "Status": "Delivered", + "OrderDate": new Date("2025-07-27"), + "Amount": "$552.46" + }, + { + "OrderID": "ORD1075", + "CustomerName": "Bob Wilson", + "Product": "Laptop", + "Status": "Shipped", + "OrderDate": new Date("2025-08-09"), + "Amount": "$787.90" + }, + { + "OrderID": "ORD1076", + "CustomerName": "Leo Red", + "Product": "Camera", + "Status": "Cancelled", + "OrderDate": new Date("2025-12-12"), + "Amount": "$221.56" + }, + { + "OrderID": "ORD1077", + "CustomerName": "Alice Johnson", + "Product": "Bag", + "Status": "Delivered", + "OrderDate": new Date("2025-09-21"), + "Amount": "$667.22" + }, + { + "OrderID": "ORD1078", + "CustomerName": "Henry Taylor", + "Product": "Headphones", + "Status": "Delivered", + "OrderDate": new Date("2025-04-26"), + "Amount": "$808.50" + }, + { + "OrderID": "ORD1079", + "CustomerName": "Eve Green", + "Product": "Shirt", + "Status": "Shipped", + "OrderDate": new Date("2025-09-01"), + "Amount": "$615.16" + }, + { + "OrderID": "ORD1080", + "CustomerName": "Leo Red", + "Product": "Tablet", + "Status": "Shipped", + "OrderDate": new Date("2025-12-23"), + "Amount": "$390.14" + }, + { + "OrderID": "ORD1081", + "CustomerName": "David Brown", + "Product": "Watch", + "Status": "Pending", + "OrderDate": new Date("2025-02-24"), + "Amount": "$780.64" + }, + { + "OrderID": "ORD1082", + "CustomerName": "Alice Johnson", + "Product": "Shoes", + "Status": "Cancelled", + "OrderDate": new Date("2025-01-26"), + "Amount": "$561.83" + }, + { + "OrderID": "ORD1083", + "CustomerName": "Leo Red", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-12-08"), + "Amount": "$535.82" + }, + { + "OrderID": "ORD1084", + "CustomerName": "Leo Red", + "Product": "Book", + "Status": "Cancelled", + "OrderDate": new Date("2025-10-08"), + "Amount": "$451.45" + }, + { + "OrderID": "ORD1085", + "CustomerName": "Paul Orange", + "Product": "Camera", + "Status": "Delivered", + "OrderDate": new Date("2025-05-07"), + "Amount": "$841.46" + }, + { + "OrderID": "ORD1086", + "CustomerName": "Ivy White", + "Product": "Camera", + "Status": "Shipped", + "OrderDate": new Date("2025-05-21"), + "Amount": "$445.47" + }, + { + "OrderID": "ORD1087", + "CustomerName": "David Brown", + "Product": "Laptop", + "Status": "Delivered", + "OrderDate": new Date("2025-06-13"), + "Amount": "$894.10" + }, + { + "OrderID": "ORD1088", + "CustomerName": "Frank Miller", + "Product": "Watch", + "Status": "Shipped", + "OrderDate": new Date("2025-07-16"), + "Amount": "$697.01" + }, + { + "OrderID": "ORD1089", + "CustomerName": "Henry Taylor", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-06-19"), + "Amount": "$547.19" + }, + { + "OrderID": "ORD1090", + "CustomerName": "Jane Smith", + "Product": "Headphones", + "Status": "Cancelled", + "OrderDate": new Date("2025-07-19"), + "Amount": "$905.79" + }, + { + "OrderID": "ORD1091", + "CustomerName": "Kelly Gray", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-01-04"), + "Amount": "$943.31" + }, + { + "OrderID": "ORD1092", + "CustomerName": "Quinn Yellow", + "Product": "Tablet", + "Status": "Shipped", + "OrderDate": new Date("2025-09-07"), + "Amount": "$227.23" + }, + { + "OrderID": "ORD1093", + "CustomerName": "Paul Orange", + "Product": "Shirt", + "Status": "Cancelled", + "OrderDate": new Date("2025-06-22"), + "Amount": "$672.18" + }, + { + "OrderID": "ORD1094", + "CustomerName": "Alice Johnson", + "Product": "Camera", + "Status": "Shipped", + "OrderDate": new Date("2025-11-15"), + "Amount": "$538.78" + }, + { + "OrderID": "ORD1095", + "CustomerName": "Kelly Gray", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-02-12"), + "Amount": "$646.32" + }, + { + "OrderID": "ORD1096", + "CustomerName": "Leo Red", + "Product": "Watch", + "Status": "Pending", + "OrderDate": new Date("2025-05-14"), + "Amount": "$385.31" + }, + { + "OrderID": "ORD1097", + "CustomerName": "Leo Red", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-07-14"), + "Amount": "$285.47" + }, + { + "OrderID": "ORD1098", + "CustomerName": "John Doe", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-01-10"), + "Amount": "$751.53" + }, + { + "OrderID": "ORD1099", + "CustomerName": "Rose Pink", + "Product": "Headphones", + "Status": "Pending", + "OrderDate": new Date("2025-11-30"), + "Amount": "$49.86" + }, + { + "OrderID": "ORD1100", + "CustomerName": "David Brown", + "Product": "Headphones", + "Status": "Pending", + "OrderDate": new Date("2025-11-15"), + "Amount": "$160.86" + }, + { + "OrderID": "ORD1101", + "CustomerName": "Paul Orange", + "Product": "Bag", + "Status": "Shipped", + "OrderDate": new Date("2025-08-27"), + "Amount": "$702.47" + }, + { + "OrderID": "ORD1102", + "CustomerName": "Alice Johnson", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-03-25"), + "Amount": "$965.07" + }, + { + "OrderID": "ORD1103", + "CustomerName": "Kelly Gray", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-10-22"), + "Amount": "$680.57" + }, + { + "OrderID": "ORD1104", + "CustomerName": "Quinn Yellow", + "Product": "Headphones", + "Status": "Pending", + "OrderDate": new Date("2025-10-31"), + "Amount": "$693.71" + }, + { + "OrderID": "ORD1105", + "CustomerName": "Grace Lee", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-10-17"), + "Amount": "$784.81" + }, + { + "OrderID": "ORD1106", + "CustomerName": "Jack Black", + "Product": "Tablet", + "Status": "Delivered", + "OrderDate": new Date("2025-02-05"), + "Amount": "$510.90" + }, + { + "OrderID": "ORD1107", + "CustomerName": "Eve Green", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-24"), + "Amount": "$439.19" + }, + { + "OrderID": "ORD1108", + "CustomerName": "Leo Red", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-04-01"), + "Amount": "$736.46" + }, + { + "OrderID": "ORD1109", + "CustomerName": "Noah Green", + "Product": "Shoes", + "Status": "Cancelled", + "OrderDate": new Date("2025-08-27"), + "Amount": "$441.22" + }, + { + "OrderID": "ORD1110", + "CustomerName": "Mia Blue", + "Product": "Headphones", + "Status": "Pending", + "OrderDate": new Date("2025-05-23"), + "Amount": "$882.81" + }, + { + "OrderID": "ORD1111", + "CustomerName": "Leo Red", + "Product": "Book", + "Status": "Cancelled", + "OrderDate": new Date("2025-06-22"), + "Amount": "$38.41" + }, + { + "OrderID": "ORD1112", + "CustomerName": "Alice Johnson", + "Product": "Camera", + "Status": "Shipped", + "OrderDate": new Date("2025-07-01"), + "Amount": "$799.85" + }, + { + "OrderID": "ORD1113", + "CustomerName": "John Doe", + "Product": "Book", + "Status": "Delivered", + "OrderDate": new Date("2025-10-12"), + "Amount": "$20.05" + }, + { + "OrderID": "ORD1114", + "CustomerName": "Henry Taylor", + "Product": "Headphones", + "Status": "Cancelled", + "OrderDate": new Date("2025-09-08"), + "Amount": "$559.62" + }, + { + "OrderID": "ORD1115", + "CustomerName": "Paul Orange", + "Product": "Camera", + "Status": "Cancelled", + "OrderDate": new Date("2025-01-09"), + "Amount": "$102.12" + }, + { + "OrderID": "ORD1116", + "CustomerName": "Quinn Yellow", + "Product": "Headphones", + "Status": "Delivered", + "OrderDate": new Date("2025-12-06"), + "Amount": "$585.74" + }, + { + "OrderID": "ORD1117", + "CustomerName": "Jack Black", + "Product": "Shoes", + "Status": "Delivered", + "OrderDate": new Date("2025-08-06"), + "Amount": "$996.67" + }, + { + "OrderID": "ORD1118", + "CustomerName": "Rose Pink", + "Product": "Camera", + "Status": "Delivered", + "OrderDate": new Date("2025-06-06"), + "Amount": "$258.89" + }, + { + "OrderID": "ORD1119", + "CustomerName": "Carol Davis", + "Product": "Phone", + "Status": "Pending", + "OrderDate": new Date("2025-10-02"), + "Amount": "$951.37" + }, + { + "OrderID": "ORD1120", + "CustomerName": "Carol Davis", + "Product": "Headphones", + "Status": "Cancelled", + "OrderDate": new Date("2025-05-22"), + "Amount": "$727.34" + }, + { + "OrderID": "ORD1121", + "CustomerName": "Noah Green", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-04-10"), + "Amount": "$303.28" + }, + { + "OrderID": "ORD1122", + "CustomerName": "Alice Johnson", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-12-29"), + "Amount": "$538.79" + }, + { + "OrderID": "ORD1123", + "CustomerName": "Jane Smith", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-12-24"), + "Amount": "$944.65" + }, + { + "OrderID": "ORD1124", + "CustomerName": "Grace Lee", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-08-29"), + "Amount": "$483.93" + }, + { + "OrderID": "ORD1125", + "CustomerName": "Alice Johnson", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-09-02"), + "Amount": "$122.95" + }, + { + "OrderID": "ORD1126", + "CustomerName": "Quinn Yellow", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-10-23"), + "Amount": "$633.15" + }, + { + "OrderID": "ORD1127", + "CustomerName": "Frank Miller", + "Product": "Watch", + "Status": "Delivered", + "OrderDate": new Date("2025-02-13"), + "Amount": "$993.98" + }, + { + "OrderID": "ORD1128", + "CustomerName": "Jack Black", + "Product": "Tablet", + "Status": "Shipped", + "OrderDate": new Date("2025-09-25"), + "Amount": "$386.57" + }, + { + "OrderID": "ORD1129", + "CustomerName": "Bob Wilson", + "Product": "Book", + "Status": "Cancelled", + "OrderDate": new Date("2025-06-06"), + "Amount": "$572.94" + }, + { + "OrderID": "ORD1130", + "CustomerName": "Noah Green", + "Product": "Bag", + "Status": "Shipped", + "OrderDate": new Date("2025-11-17"), + "Amount": "$218.91" + }, + { + "OrderID": "ORD1131", + "CustomerName": "Alice Johnson", + "Product": "Headphones", + "Status": "Shipped", + "OrderDate": new Date("2025-10-10"), + "Amount": "$84.31" + }, + { + "OrderID": "ORD1132", + "CustomerName": "Olivia Purple", + "Product": "Camera", + "Status": "Cancelled", + "OrderDate": new Date("2025-05-30"), + "Amount": "$42.31" + }, + { + "OrderID": "ORD1133", + "CustomerName": "Bob Wilson", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-12-18"), + "Amount": "$241.09" + }, + { + "OrderID": "ORD1134", + "CustomerName": "Kelly Gray", + "Product": "Headphones", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-28"), + "Amount": "$549.12" + }, + { + "OrderID": "ORD1135", + "CustomerName": "John Doe", + "Product": "Watch", + "Status": "Pending", + "OrderDate": new Date("2025-01-31"), + "Amount": "$174.26" + }, + { + "OrderID": "ORD1136", + "CustomerName": "Noah Green", + "Product": "Book", + "Status": "Delivered", + "OrderDate": new Date("2025-08-13"), + "Amount": "$133.11" + }, + { + "OrderID": "ORD1137", + "CustomerName": "Quinn Yellow", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-08-13"), + "Amount": "$89.64" + }, + { + "OrderID": "ORD1138", + "CustomerName": "Olivia Purple", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-01-14"), + "Amount": "$100.41" + }, + { + "OrderID": "ORD1139", + "CustomerName": "John Doe", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-03-31"), + "Amount": "$475.80" + }, + { + "OrderID": "ORD1140", + "CustomerName": "John Doe", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-11-22"), + "Amount": "$816.10" + }, + { + "OrderID": "ORD1141", + "CustomerName": "Paul Orange", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-06-20"), + "Amount": "$327.85" + }, + { + "OrderID": "ORD1142", + "CustomerName": "Alice Johnson", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-12-22"), + "Amount": "$500.51" + }, + { + "OrderID": "ORD1143", + "CustomerName": "Jack Black", + "Product": "Shirt", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-15"), + "Amount": "$321.37" + }, + { + "OrderID": "ORD1144", + "CustomerName": "Grace Lee", + "Product": "Tablet", + "Status": "Pending", + "OrderDate": new Date("2025-12-03"), + "Amount": "$870.67" + }, + { + "OrderID": "ORD1145", + "CustomerName": "Olivia Purple", + "Product": "Shirt", + "Status": "Shipped", + "OrderDate": new Date("2025-09-23"), + "Amount": "$368.16" + }, + { + "OrderID": "ORD1146", + "CustomerName": "Leo Red", + "Product": "Shirt", + "Status": "Shipped", + "OrderDate": new Date("2025-05-17"), + "Amount": "$553.73" + }, + { + "OrderID": "ORD1147", + "CustomerName": "Leo Red", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-01-15"), + "Amount": "$973.42" + }, + { + "OrderID": "ORD1148", + "CustomerName": "Alice Johnson", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-10-10"), + "Amount": "$413.91" + }, + { + "OrderID": "ORD1149", + "CustomerName": "Grace Lee", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-11-28"), + "Amount": "$833.82" + }, + { + "OrderID": "ORD1150", + "CustomerName": "Bob Wilson", + "Product": "Shoes", + "Status": "Delivered", + "OrderDate": new Date("2025-08-01"), + "Amount": "$836.38" + }, + { + "OrderID": "ORD1151", + "CustomerName": "David Brown", + "Product": "Camera", + "Status": "Shipped", + "OrderDate": new Date("2025-07-16"), + "Amount": "$198.70" + }, + { + "OrderID": "ORD1152", + "CustomerName": "Frank Miller", + "Product": "Bag", + "Status": "Delivered", + "OrderDate": new Date("2025-08-01"), + "Amount": "$346.48" + }, + { + "OrderID": "ORD1153", + "CustomerName": "John Doe", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-06-02"), + "Amount": "$839.10" + }, + { + "OrderID": "ORD1154", + "CustomerName": "Frank Miller", + "Product": "Camera", + "Status": "Cancelled", + "OrderDate": new Date("2025-06-26"), + "Amount": "$339.12" + }, + { + "OrderID": "ORD1155", + "CustomerName": "Quinn Yellow", + "Product": "Camera", + "Status": "Delivered", + "OrderDate": new Date("2025-04-07"), + "Amount": "$980.97" + }, + { + "OrderID": "ORD1156", + "CustomerName": "Kelly Gray", + "Product": "Tablet", + "Status": "Shipped", + "OrderDate": new Date("2025-07-30"), + "Amount": "$53.21" + }, + { + "OrderID": "ORD1157", + "CustomerName": "Quinn Yellow", + "Product": "Tablet", + "Status": "Shipped", + "OrderDate": new Date("2025-09-11"), + "Amount": "$965.18" + }, + { + "OrderID": "ORD1158", + "CustomerName": "Ivy White", + "Product": "Book", + "Status": "Delivered", + "OrderDate": new Date("2025-02-21"), + "Amount": "$875.45" + }, + { + "OrderID": "ORD1159", + "CustomerName": "Grace Lee", + "Product": "Shoes", + "Status": "Cancelled", + "OrderDate": new Date("2025-01-08"), + "Amount": "$725.22" + }, + { + "OrderID": "ORD1160", + "CustomerName": "Frank Miller", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-05-16"), + "Amount": "$345.18" + }, + { + "OrderID": "ORD1161", + "CustomerName": "Henry Taylor", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-06-12"), + "Amount": "$630.53" + }, + { + "OrderID": "ORD1162", + "CustomerName": "Jack Black", + "Product": "Shirt", + "Status": "Pending", + "OrderDate": new Date("2025-05-01"), + "Amount": "$634.85" + }, + { + "OrderID": "ORD1163", + "CustomerName": "David Brown", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-20"), + "Amount": "$762.77" + }, + { + "OrderID": "ORD1164", + "CustomerName": "Leo Red", + "Product": "Watch", + "Status": "Delivered", + "OrderDate": new Date("2025-01-15"), + "Amount": "$55.53" + }, + { + "OrderID": "ORD1165", + "CustomerName": "Bob Wilson", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-08-09"), + "Amount": "$154.11" + }, + { + "OrderID": "ORD1166", + "CustomerName": "Olivia Purple", + "Product": "Book", + "Status": "Shipped", + "OrderDate": new Date("2025-03-29"), + "Amount": "$183.32" + }, + { + "OrderID": "ORD1167", + "CustomerName": "Noah Green", + "Product": "Headphones", + "Status": "Cancelled", + "OrderDate": new Date("2025-10-26"), + "Amount": "$151.69" + }, + { + "OrderID": "ORD1168", + "CustomerName": "John Doe", + "Product": "Camera", + "Status": "Delivered", + "OrderDate": new Date("2025-12-08"), + "Amount": "$19.30" + }, + { + "OrderID": "ORD1169", + "CustomerName": "Bob Wilson", + "Product": "Shoes", + "Status": "Shipped", + "OrderDate": new Date("2025-02-07"), + "Amount": "$447.31" + }, + { + "OrderID": "ORD1170", + "CustomerName": "Kelly Gray", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-12-20"), + "Amount": "$257.60" + }, + { + "OrderID": "ORD1171", + "CustomerName": "Carol Davis", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-24"), + "Amount": "$244.83" + }, + { + "OrderID": "ORD1172", + "CustomerName": "Kelly Gray", + "Product": "Laptop", + "Status": "Delivered", + "OrderDate": new Date("2025-01-12"), + "Amount": "$978.17" + }, + { + "OrderID": "ORD1173", + "CustomerName": "John Doe", + "Product": "Shirt", + "Status": "Pending", + "OrderDate": new Date("2025-11-07"), + "Amount": "$747.72" + }, + { + "OrderID": "ORD1174", + "CustomerName": "David Brown", + "Product": "Book", + "Status": "Delivered", + "OrderDate": new Date("2025-04-23"), + "Amount": "$640.25" + }, + { + "OrderID": "ORD1175", + "CustomerName": "Frank Miller", + "Product": "Bag", + "Status": "Pending", + "OrderDate": new Date("2025-06-08"), + "Amount": "$790.72" + }, + { + "OrderID": "ORD1176", + "CustomerName": "Kelly Gray", + "Product": "Phone", + "Status": "Shipped", + "OrderDate": new Date("2025-02-16"), + "Amount": "$910.53" + }, + { + "OrderID": "ORD1177", + "CustomerName": "Olivia Purple", + "Product": "Watch", + "Status": "Shipped", + "OrderDate": new Date("2025-03-09"), + "Amount": "$788.65" + }, + { + "OrderID": "ORD1178", + "CustomerName": "Ivy White", + "Product": "Shoes", + "Status": "Delivered", + "OrderDate": new Date("2025-03-26"), + "Amount": "$264.40" + }, + { + "OrderID": "ORD1179", + "CustomerName": "Bob Wilson", + "Product": "Phone", + "Status": "Pending", + "OrderDate": new Date("2025-08-28"), + "Amount": "$963.26" + }, + { + "OrderID": "ORD1180", + "CustomerName": "David Brown", + "Product": "Tablet", + "Status": "Delivered", + "OrderDate": new Date("2025-02-16"), + "Amount": "$792.78" + }, + { + "OrderID": "ORD1181", + "CustomerName": "John Doe", + "Product": "Shoes", + "Status": "Pending", + "OrderDate": new Date("2025-08-21"), + "Amount": "$374.90" + }, + { + "OrderID": "ORD1182", + "CustomerName": "Kelly Gray", + "Product": "Tablet", + "Status": "Delivered", + "OrderDate": new Date("2025-02-25"), + "Amount": "$678.09" + }, + { + "OrderID": "ORD1183", + "CustomerName": "Eve Green", + "Product": "Book", + "Status": "Delivered", + "OrderDate": new Date("2025-11-09"), + "Amount": "$229.15" + }, + { + "OrderID": "ORD1184", + "CustomerName": "Leo Red", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-03-01"), + "Amount": "$148.38" + }, + { + "OrderID": "ORD1185", + "CustomerName": "Bob Wilson", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-02-19"), + "Amount": "$242.45" + }, + { + "OrderID": "ORD1186", + "CustomerName": "Olivia Purple", + "Product": "Book", + "Status": "Shipped", + "OrderDate": new Date("2025-08-01"), + "Amount": "$658.37" + }, + { + "OrderID": "ORD1187", + "CustomerName": "Noah Green", + "Product": "Tablet", + "Status": "Delivered", + "OrderDate": new Date("2025-01-17"), + "Amount": "$693.38" + }, + { + "OrderID": "ORD1188", + "CustomerName": "Leo Red", + "Product": "Camera", + "Status": "Shipped", + "OrderDate": new Date("2025-07-05"), + "Amount": "$108.36" + }, + { + "OrderID": "ORD1189", + "CustomerName": "Jack Black", + "Product": "Phone", + "Status": "Pending", + "OrderDate": new Date("2025-07-23"), + "Amount": "$283.12" + }, + { + "OrderID": "ORD1190", + "CustomerName": "Leo Red", + "Product": "Bag", + "Status": "Shipped", + "OrderDate": new Date("2025-11-25"), + "Amount": "$643.10" + }, + { + "OrderID": "ORD1191", + "CustomerName": "Jane Smith", + "Product": "Phone", + "Status": "Shipped", + "OrderDate": new Date("2025-03-06"), + "Amount": "$789.11" + }, + { + "OrderID": "ORD1192", + "CustomerName": "Henry Taylor", + "Product": "Shoes", + "Status": "Shipped", + "OrderDate": new Date("2025-10-28"), + "Amount": "$223.79" + }, + { + "OrderID": "ORD1193", + "CustomerName": "Mia Blue", + "Product": "Watch", + "Status": "Pending", + "OrderDate": new Date("2025-05-22"), + "Amount": "$859.82" + }, + { + "OrderID": "ORD1194", + "CustomerName": "Frank Miller", + "Product": "Shoes", + "Status": "Delivered", + "OrderDate": new Date("2025-03-31"), + "Amount": "$118.83" + }, + { + "OrderID": "ORD1195", + "CustomerName": "Frank Miller", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-05-02"), + "Amount": "$592.96" + }, + { + "OrderID": "ORD1196", + "CustomerName": "Alice Johnson", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-03-06"), + "Amount": "$744.30" + }, + { + "OrderID": "ORD1197", + "CustomerName": "Grace Lee", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-08-18"), + "Amount": "$780.24" + }, + { + "OrderID": "ORD1198", + "CustomerName": "Kelly Gray", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-09-15"), + "Amount": "$229.33" + }, + { + "OrderID": "ORD1199", + "CustomerName": "Ivy White", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-11-26"), + "Amount": "$964.39" + }, + { + "OrderID": "ORD1200", + "CustomerName": "Paul Orange", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-12-18"), + "Amount": "$116.88" + }, + { + "OrderID": "ORD1201", + "CustomerName": "Henry Taylor", + "Product": "Bag", + "Status": "Delivered", + "OrderDate": new Date("2025-11-08"), + "Amount": "$156.85" + }, + { + "OrderID": "ORD1202", + "CustomerName": "John Doe", + "Product": "Book", + "Status": "Delivered", + "OrderDate": new Date("2025-07-15"), + "Amount": "$994.68" + }, + { + "OrderID": "ORD1203", + "CustomerName": "Bob Wilson", + "Product": "Camera", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-20"), + "Amount": "$795.17" + }, + { + "OrderID": "ORD1204", + "CustomerName": "Jack Black", + "Product": "Headphones", + "Status": "Cancelled", + "OrderDate": new Date("2025-08-20"), + "Amount": "$889.21" + }, + { + "OrderID": "ORD1205", + "CustomerName": "Mia Blue", + "Product": "Camera", + "Status": "Cancelled", + "OrderDate": new Date("2025-08-01"), + "Amount": "$732.32" + }, + { + "OrderID": "ORD1206", + "CustomerName": "Olivia Purple", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-07-11"), + "Amount": "$954.06" + }, + { + "OrderID": "ORD1207", + "CustomerName": "Henry Taylor", + "Product": "Bag", + "Status": "Pending", + "OrderDate": new Date("2025-02-17"), + "Amount": "$437.56" + }, + { + "OrderID": "ORD1208", + "CustomerName": "Frank Miller", + "Product": "Shoes", + "Status": "Pending", + "OrderDate": new Date("2025-10-28"), + "Amount": "$957.06" + }, + { + "OrderID": "ORD1209", + "CustomerName": "Grace Lee", + "Product": "Tablet", + "Status": "Delivered", + "OrderDate": new Date("2025-12-07"), + "Amount": "$941.72" + }, + { + "OrderID": "ORD1210", + "CustomerName": "Jane Smith", + "Product": "Laptop", + "Status": "Delivered", + "OrderDate": new Date("2025-06-30"), + "Amount": "$112.56" + }, + { + "OrderID": "ORD1211", + "CustomerName": "Carol Davis", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-04-25"), + "Amount": "$848.80" + }, + { + "OrderID": "ORD1212", + "CustomerName": "Jack Black", + "Product": "Phone", + "Status": "Pending", + "OrderDate": new Date("2025-05-23"), + "Amount": "$578.36" + }, + { + "OrderID": "ORD1213", + "CustomerName": "Jack Black", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-11-08"), + "Amount": "$929.79" + }, + { + "OrderID": "ORD1214", + "CustomerName": "Eve Green", + "Product": "Watch", + "Status": "Delivered", + "OrderDate": new Date("2025-12-26"), + "Amount": "$764.79" + }, + { + "OrderID": "ORD1215", + "CustomerName": "Rose Pink", + "Product": "Shirt", + "Status": "Shipped", + "OrderDate": new Date("2025-03-15"), + "Amount": "$570.66" + }, + { + "OrderID": "ORD1216", + "CustomerName": "Henry Taylor", + "Product": "Watch", + "Status": "Pending", + "OrderDate": new Date("2025-02-16"), + "Amount": "$748.65" + }, + { + "OrderID": "ORD1217", + "CustomerName": "Quinn Yellow", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-06-24"), + "Amount": "$165.84" + }, + { + "OrderID": "ORD1218", + "CustomerName": "Mia Blue", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-01-27"), + "Amount": "$164.02" + }, + { + "OrderID": "ORD1219", + "CustomerName": "Henry Taylor", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-12-05"), + "Amount": "$429.77" + }, + { + "OrderID": "ORD1220", + "CustomerName": "Olivia Purple", + "Product": "Laptop", + "Status": "Shipped", + "OrderDate": new Date("2025-09-20"), + "Amount": "$122.68" + }, + { + "OrderID": "ORD1221", + "CustomerName": "Grace Lee", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-09-27"), + "Amount": "$670.46" + }, + { + "OrderID": "ORD1222", + "CustomerName": "David Brown", + "Product": "Tablet", + "Status": "Pending", + "OrderDate": new Date("2025-01-04"), + "Amount": "$212.38" + }, + { + "OrderID": "ORD1223", + "CustomerName": "Frank Miller", + "Product": "Laptop", + "Status": "Delivered", + "OrderDate": new Date("2025-06-17"), + "Amount": "$128.78" + }, + { + "OrderID": "ORD1224", + "CustomerName": "Olivia Purple", + "Product": "Watch", + "Status": "Shipped", + "OrderDate": new Date("2025-07-14"), + "Amount": "$537.26" + }, + { + "OrderID": "ORD1225", + "CustomerName": "Ivy White", + "Product": "Shoes", + "Status": "Delivered", + "OrderDate": new Date("2025-02-06"), + "Amount": "$403.10" + }, + { + "OrderID": "ORD1226", + "CustomerName": "Olivia Purple", + "Product": "Shirt", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-09"), + "Amount": "$863.49" + }, + { + "OrderID": "ORD1227", + "CustomerName": "Kelly Gray", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-05-29"), + "Amount": "$124.02" + }, + { + "OrderID": "ORD1228", + "CustomerName": "Mia Blue", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-12-20"), + "Amount": "$920.57" + }, + { + "OrderID": "ORD1229", + "CustomerName": "Olivia Purple", + "Product": "Bag", + "Status": "Shipped", + "OrderDate": new Date("2025-08-12"), + "Amount": "$592.98" + }, + { + "OrderID": "ORD1230", + "CustomerName": "Henry Taylor", + "Product": "Tablet", + "Status": "Delivered", + "OrderDate": new Date("2025-06-23"), + "Amount": "$229.36" + }, + { + "OrderID": "ORD1231", + "CustomerName": "Henry Taylor", + "Product": "Shoes", + "Status": "Pending", + "OrderDate": new Date("2025-09-29"), + "Amount": "$514.85" + }, + { + "OrderID": "ORD1232", + "CustomerName": "Rose Pink", + "Product": "Watch", + "Status": "Shipped", + "OrderDate": new Date("2025-02-22"), + "Amount": "$154.98" + }, + { + "OrderID": "ORD1233", + "CustomerName": "Alice Johnson", + "Product": "Book", + "Status": "Shipped", + "OrderDate": new Date("2025-12-02"), + "Amount": "$84.60" + }, + { + "OrderID": "ORD1234", + "CustomerName": "Leo Red", + "Product": "Book", + "Status": "Cancelled", + "OrderDate": new Date("2025-12-15"), + "Amount": "$924.91" + }, + { + "OrderID": "ORD1235", + "CustomerName": "Mia Blue", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-04"), + "Amount": "$474.23" + }, + { + "OrderID": "ORD1236", + "CustomerName": "John Doe", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-06-30"), + "Amount": "$512.26" + }, + { + "OrderID": "ORD1237", + "CustomerName": "Leo Red", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-01-30"), + "Amount": "$375.05" + }, + { + "OrderID": "ORD1238", + "CustomerName": "Henry Taylor", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-08-25"), + "Amount": "$584.53" + }, + { + "OrderID": "ORD1239", + "CustomerName": "Leo Red", + "Product": "Book", + "Status": "Shipped", + "OrderDate": new Date("2025-06-14"), + "Amount": "$608.96" + }, + { + "OrderID": "ORD1240", + "CustomerName": "Frank Miller", + "Product": "Shirt", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-22"), + "Amount": "$812.86" + }, + { + "OrderID": "ORD1241", + "CustomerName": "Henry Taylor", + "Product": "Shoes", + "Status": "Shipped", + "OrderDate": new Date("2025-01-21"), + "Amount": "$255.27" + }, + { + "OrderID": "ORD1242", + "CustomerName": "Leo Red", + "Product": "Shoes", + "Status": "Shipped", + "OrderDate": new Date("2025-07-06"), + "Amount": "$379.12" + }, + { + "OrderID": "ORD1243", + "CustomerName": "Quinn Yellow", + "Product": "Tablet", + "Status": "Delivered", + "OrderDate": new Date("2025-12-14"), + "Amount": "$601.91" + }, + { + "OrderID": "ORD1244", + "CustomerName": "Henry Taylor", + "Product": "Phone", + "Status": "Pending", + "OrderDate": new Date("2025-10-13"), + "Amount": "$681.60" + }, + { + "OrderID": "ORD1245", + "CustomerName": "John Doe", + "Product": "Book", + "Status": "Shipped", + "OrderDate": new Date("2025-06-20"), + "Amount": "$90.69" + }, + { + "OrderID": "ORD1246", + "CustomerName": "Rose Pink", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-03-08"), + "Amount": "$599.09" + }, + { + "OrderID": "ORD1247", + "CustomerName": "Bob Wilson", + "Product": "Shoes", + "Status": "Cancelled", + "OrderDate": new Date("2025-11-26"), + "Amount": "$793.75" + }, + { + "OrderID": "ORD1248", + "CustomerName": "Ivy White", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-09-18"), + "Amount": "$368.21" + }, + { + "OrderID": "ORD1249", + "CustomerName": "Bob Wilson", + "Product": "Watch", + "Status": "Shipped", + "OrderDate": new Date("2025-06-24"), + "Amount": "$948.19" + }, + { + "OrderID": "ORD1250", + "CustomerName": "Carol Davis", + "Product": "Headphones", + "Status": "Shipped", + "OrderDate": new Date("2025-03-21"), + "Amount": "$86.39" + }, + { + "OrderID": "ORD1251", + "CustomerName": "Ivy White", + "Product": "Shoes", + "Status": "Pending", + "OrderDate": new Date("2025-12-05"), + "Amount": "$343.40" + }, + { + "OrderID": "ORD1252", + "CustomerName": "Noah Green", + "Product": "Tablet", + "Status": "Shipped", + "OrderDate": new Date("2025-03-25"), + "Amount": "$189.04" + }, + { + "OrderID": "ORD1253", + "CustomerName": "Leo Red", + "Product": "Shirt", + "Status": "Cancelled", + "OrderDate": new Date("2025-07-06"), + "Amount": "$679.60" + }, + { + "OrderID": "ORD1254", + "CustomerName": "Leo Red", + "Product": "Book", + "Status": "Delivered", + "OrderDate": new Date("2025-08-18"), + "Amount": "$241.66" + }, + { + "OrderID": "ORD1255", + "CustomerName": "Bob Wilson", + "Product": "Camera", + "Status": "Shipped", + "OrderDate": new Date("2025-07-08"), + "Amount": "$681.52" + }, + { + "OrderID": "ORD1256", + "CustomerName": "Leo Red", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-09-15"), + "Amount": "$532.19" + }, + { + "OrderID": "ORD1257", + "CustomerName": "Carol Davis", + "Product": "Book", + "Status": "Shipped", + "OrderDate": new Date("2025-05-09"), + "Amount": "$61.66" + }, + { + "OrderID": "ORD1258", + "CustomerName": "Rose Pink", + "Product": "Shoes", + "Status": "Pending", + "OrderDate": new Date("2025-12-31"), + "Amount": "$847.43" + }, + { + "OrderID": "ORD1259", + "CustomerName": "Bob Wilson", + "Product": "Bag", + "Status": "Shipped", + "OrderDate": new Date("2025-05-20"), + "Amount": "$454.83" + }, + { + "OrderID": "ORD1260", + "CustomerName": "Frank Miller", + "Product": "Tablet", + "Status": "Pending", + "OrderDate": new Date("2025-04-24"), + "Amount": "$818.54" + }, + { + "OrderID": "ORD1261", + "CustomerName": "Eve Green", + "Product": "Tablet", + "Status": "Pending", + "OrderDate": new Date("2025-07-22"), + "Amount": "$506.99" + }, + { + "OrderID": "ORD1262", + "CustomerName": "Quinn Yellow", + "Product": "Bag", + "Status": "Delivered", + "OrderDate": new Date("2025-04-25"), + "Amount": "$37.91" + }, + { + "OrderID": "ORD1263", + "CustomerName": "Mia Blue", + "Product": "Watch", + "Status": "Shipped", + "OrderDate": new Date("2025-01-20"), + "Amount": "$294.01" + }, + { + "OrderID": "ORD1264", + "CustomerName": "Frank Miller", + "Product": "Camera", + "Status": "Cancelled", + "OrderDate": new Date("2025-11-12"), + "Amount": "$15.20" + }, + { + "OrderID": "ORD1265", + "CustomerName": "Eve Green", + "Product": "Laptop", + "Status": "Shipped", + "OrderDate": new Date("2025-03-18"), + "Amount": "$553.32" + }, + { + "OrderID": "ORD1266", + "CustomerName": "Olivia Purple", + "Product": "Bag", + "Status": "Delivered", + "OrderDate": new Date("2025-05-02"), + "Amount": "$308.14" + }, + { + "OrderID": "ORD1267", + "CustomerName": "David Brown", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-02"), + "Amount": "$119.75" + }, + { + "OrderID": "ORD1268", + "CustomerName": "Noah Green", + "Product": "Shoes", + "Status": "Pending", + "OrderDate": new Date("2025-11-20"), + "Amount": "$520.22" + }, + { + "OrderID": "ORD1269", + "CustomerName": "Frank Miller", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-01-01"), + "Amount": "$618.66" + }, + { + "OrderID": "ORD1270", + "CustomerName": "Kelly Gray", + "Product": "Tablet", + "Status": "Shipped", + "OrderDate": new Date("2025-12-07"), + "Amount": "$671.53" + }, + { + "OrderID": "ORD1271", + "CustomerName": "Rose Pink", + "Product": "Bag", + "Status": "Pending", + "OrderDate": new Date("2025-07-19"), + "Amount": "$874.60" + }, + { + "OrderID": "ORD1272", + "CustomerName": "Quinn Yellow", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-01-09"), + "Amount": "$363.52" + }, + { + "OrderID": "ORD1273", + "CustomerName": "Rose Pink", + "Product": "Headphones", + "Status": "Pending", + "OrderDate": new Date("2025-10-25"), + "Amount": "$737.84" + }, + { + "OrderID": "ORD1274", + "CustomerName": "Frank Miller", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-10-07"), + "Amount": "$345.16" + }, + { + "OrderID": "ORD1275", + "CustomerName": "Leo Red", + "Product": "Camera", + "Status": "Shipped", + "OrderDate": new Date("2025-03-11"), + "Amount": "$72.47" + }, + { + "OrderID": "ORD1276", + "CustomerName": "Jane Smith", + "Product": "Laptop", + "Status": "Shipped", + "OrderDate": new Date("2025-01-23"), + "Amount": "$793.20" + }, + { + "OrderID": "ORD1277", + "CustomerName": "Mia Blue", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-10-06"), + "Amount": "$478.67" + }, + { + "OrderID": "ORD1278", + "CustomerName": "Carol Davis", + "Product": "Laptop", + "Status": "Delivered", + "OrderDate": new Date("2025-01-25"), + "Amount": "$867.14" + }, + { + "OrderID": "ORD1279", + "CustomerName": "John Doe", + "Product": "Bag", + "Status": "Delivered", + "OrderDate": new Date("2025-08-12"), + "Amount": "$890.59" + }, + { + "OrderID": "ORD1280", + "CustomerName": "Quinn Yellow", + "Product": "Phone", + "Status": "Shipped", + "OrderDate": new Date("2025-09-12"), + "Amount": "$695.15" + }, + { + "OrderID": "ORD1281", + "CustomerName": "Ivy White", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-08-06"), + "Amount": "$88.14" + }, + { + "OrderID": "ORD1282", + "CustomerName": "Jack Black", + "Product": "Laptop", + "Status": "Delivered", + "OrderDate": new Date("2025-02-22"), + "Amount": "$89.27" + }, + { + "OrderID": "ORD1283", + "CustomerName": "Bob Wilson", + "Product": "Camera", + "Status": "Cancelled", + "OrderDate": new Date("2025-03-27"), + "Amount": "$692.87" + }, + { + "OrderID": "ORD1284", + "CustomerName": "Leo Red", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-11-11"), + "Amount": "$998.17" + }, + { + "OrderID": "ORD1285", + "CustomerName": "Jane Smith", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-07-06"), + "Amount": "$517.96" + }, + { + "OrderID": "ORD1286", + "CustomerName": "Eve Green", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-01-18"), + "Amount": "$134.97" + }, + { + "OrderID": "ORD1287", + "CustomerName": "Rose Pink", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-10-18"), + "Amount": "$42.06" + }, + { + "OrderID": "ORD1288", + "CustomerName": "Leo Red", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-08-16"), + "Amount": "$765.45" + }, + { + "OrderID": "ORD1289", + "CustomerName": "Ivy White", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-06-10"), + "Amount": "$653.07" + }, + { + "OrderID": "ORD1290", + "CustomerName": "Grace Lee", + "Product": "Shirt", + "Status": "Shipped", + "OrderDate": new Date("2025-09-13"), + "Amount": "$522.57" + }, + { + "OrderID": "ORD1291", + "CustomerName": "John Doe", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-04-20"), + "Amount": "$996.40" + }, + { + "OrderID": "ORD1292", + "CustomerName": "Paul Orange", + "Product": "Headphones", + "Status": "Pending", + "OrderDate": new Date("2025-03-11"), + "Amount": "$854.30" + }, + { + "OrderID": "ORD1293", + "CustomerName": "Alice Johnson", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-12-16"), + "Amount": "$967.89" + }, + { + "OrderID": "ORD1294", + "CustomerName": "Rose Pink", + "Product": "Bag", + "Status": "Delivered", + "OrderDate": new Date("2025-06-03"), + "Amount": "$852.85" + }, + { + "OrderID": "ORD1295", + "CustomerName": "Rose Pink", + "Product": "Shoes", + "Status": "Shipped", + "OrderDate": new Date("2025-03-04"), + "Amount": "$985.28" + }, + { + "OrderID": "ORD1296", + "CustomerName": "David Brown", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-07-04"), + "Amount": "$558.48" + }, + { + "OrderID": "ORD1297", + "CustomerName": "Leo Red", + "Product": "Shoes", + "Status": "Shipped", + "OrderDate": new Date("2025-11-10"), + "Amount": "$885.40" + }, + { + "OrderID": "ORD1298", + "CustomerName": "Bob Wilson", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-09-27"), + "Amount": "$416.69" + }, + { + "OrderID": "ORD1299", + "CustomerName": "Kelly Gray", + "Product": "Bag", + "Status": "Shipped", + "OrderDate": new Date("2025-06-12"), + "Amount": "$645.92" + }, + { + "OrderID": "ORD1300", + "CustomerName": "Leo Red", + "Product": "Shoes", + "Status": "Delivered", + "OrderDate": new Date("2025-03-07"), + "Amount": "$879.18" + }, + { + "OrderID": "ORD1301", + "CustomerName": "Frank Miller", + "Product": "Tablet", + "Status": "Pending", + "OrderDate": new Date("2025-03-05"), + "Amount": "$522.92" + }, + { + "OrderID": "ORD1302", + "CustomerName": "Alice Johnson", + "Product": "Watch", + "Status": "Delivered", + "OrderDate": new Date("2025-12-30"), + "Amount": "$233.22" + }, + { + "OrderID": "ORD1303", + "CustomerName": "Bob Wilson", + "Product": "Bag", + "Status": "Delivered", + "OrderDate": new Date("2025-04-11"), + "Amount": "$638.71" + }, + { + "OrderID": "ORD1304", + "CustomerName": "Frank Miller", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-09-15"), + "Amount": "$644.58" + }, + { + "OrderID": "ORD1305", + "CustomerName": "Alice Johnson", + "Product": "Book", + "Status": "Delivered", + "OrderDate": new Date("2025-10-16"), + "Amount": "$50.78" + }, + { + "OrderID": "ORD1306", + "CustomerName": "Henry Taylor", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-11-30"), + "Amount": "$218.70" + }, + { + "OrderID": "ORD1307", + "CustomerName": "Noah Green", + "Product": "Shirt", + "Status": "Cancelled", + "OrderDate": new Date("2025-11-18"), + "Amount": "$550.12" + }, + { + "OrderID": "ORD1308", + "CustomerName": "Paul Orange", + "Product": "Headphones", + "Status": "Cancelled", + "OrderDate": new Date("2025-06-02"), + "Amount": "$459.01" + }, + { + "OrderID": "ORD1309", + "CustomerName": "Alice Johnson", + "Product": "Camera", + "Status": "Cancelled", + "OrderDate": new Date("2025-09-05"), + "Amount": "$469.80" + }, + { + "OrderID": "ORD1310", + "CustomerName": "Noah Green", + "Product": "Watch", + "Status": "Delivered", + "OrderDate": new Date("2025-06-13"), + "Amount": "$736.86" + }, + { + "OrderID": "ORD1311", + "CustomerName": "Quinn Yellow", + "Product": "Watch", + "Status": "Delivered", + "OrderDate": new Date("2025-09-21"), + "Amount": "$566.03" + }, + { + "OrderID": "ORD1312", + "CustomerName": "David Brown", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-05-17"), + "Amount": "$455.10" + }, + { + "OrderID": "ORD1313", + "CustomerName": "Grace Lee", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-07-16"), + "Amount": "$865.52" + }, + { + "OrderID": "ORD1314", + "CustomerName": "David Brown", + "Product": "Watch", + "Status": "Delivered", + "OrderDate": new Date("2025-10-23"), + "Amount": "$723.92" + }, + { + "OrderID": "ORD1315", + "CustomerName": "Alice Johnson", + "Product": "Camera", + "Status": "Cancelled", + "OrderDate": new Date("2025-09-13"), + "Amount": "$880.28" + }, + { + "OrderID": "ORD1316", + "CustomerName": "Eve Green", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-09-16"), + "Amount": "$462.66" + }, + { + "OrderID": "ORD1317", + "CustomerName": "Carol Davis", + "Product": "Book", + "Status": "Delivered", + "OrderDate": new Date("2025-01-25"), + "Amount": "$60.04" + }, + { + "OrderID": "ORD1318", + "CustomerName": "Noah Green", + "Product": "Camera", + "Status": "Delivered", + "OrderDate": new Date("2025-10-02"), + "Amount": "$18.10" + }, + { + "OrderID": "ORD1319", + "CustomerName": "Olivia Purple", + "Product": "Watch", + "Status": "Delivered", + "OrderDate": new Date("2025-07-07"), + "Amount": "$766.22" + }, + { + "OrderID": "ORD1320", + "CustomerName": "Jane Smith", + "Product": "Tablet", + "Status": "Pending", + "OrderDate": new Date("2025-10-19"), + "Amount": "$566.20" + }, + { + "OrderID": "ORD1321", + "CustomerName": "Jack Black", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-07-17"), + "Amount": "$509.21" + }, + { + "OrderID": "ORD1322", + "CustomerName": "Noah Green", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-03-07"), + "Amount": "$975.33" + }, + { + "OrderID": "ORD1323", + "CustomerName": "Rose Pink", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-03-15"), + "Amount": "$207.07" + }, + { + "OrderID": "ORD1324", + "CustomerName": "Quinn Yellow", + "Product": "Shoes", + "Status": "Pending", + "OrderDate": new Date("2025-01-24"), + "Amount": "$48.52" + }, + { + "OrderID": "ORD1325", + "CustomerName": "Paul Orange", + "Product": "Shoes", + "Status": "Cancelled", + "OrderDate": new Date("2025-03-18"), + "Amount": "$610.20" + }, + { + "OrderID": "ORD1326", + "CustomerName": "Frank Miller", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-03-25"), + "Amount": "$399.03" + }, + { + "OrderID": "ORD1327", + "CustomerName": "Kelly Gray", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-12-29"), + "Amount": "$567.30" + }, + { + "OrderID": "ORD1328", + "CustomerName": "Eve Green", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-12-11"), + "Amount": "$118.51" + }, + { + "OrderID": "ORD1329", + "CustomerName": "Kelly Gray", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-11-02"), + "Amount": "$479.84" + }, + { + "OrderID": "ORD1330", + "CustomerName": "Jane Smith", + "Product": "Book", + "Status": "Cancelled", + "OrderDate": new Date("2025-03-29"), + "Amount": "$528.99" + }, + { + "OrderID": "ORD1331", + "CustomerName": "Frank Miller", + "Product": "Headphones", + "Status": "Pending", + "OrderDate": new Date("2025-10-21"), + "Amount": "$948.72" + }, + { + "OrderID": "ORD1332", + "CustomerName": "Carol Davis", + "Product": "Shirt", + "Status": "Cancelled", + "OrderDate": new Date("2025-06-10"), + "Amount": "$424.59" + }, + { + "OrderID": "ORD1333", + "CustomerName": "Carol Davis", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-01"), + "Amount": "$708.72" + }, + { + "OrderID": "ORD1334", + "CustomerName": "Carol Davis", + "Product": "Shoes", + "Status": "Delivered", + "OrderDate": new Date("2025-12-06"), + "Amount": "$483.59" + }, + { + "OrderID": "ORD1335", + "CustomerName": "Mia Blue", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-09-30"), + "Amount": "$348.90" + }, + { + "OrderID": "ORD1336", + "CustomerName": "John Doe", + "Product": "Book", + "Status": "Cancelled", + "OrderDate": new Date("2025-04-09"), + "Amount": "$957.76" + }, + { + "OrderID": "ORD1337", + "CustomerName": "Jack Black", + "Product": "Laptop", + "Status": "Shipped", + "OrderDate": new Date("2025-06-02"), + "Amount": "$773.46" + }, + { + "OrderID": "ORD1338", + "CustomerName": "Paul Orange", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-06-28"), + "Amount": "$564.88" + }, + { + "OrderID": "ORD1339", + "CustomerName": "Bob Wilson", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-07-22"), + "Amount": "$820.19" + }, + { + "OrderID": "ORD1340", + "CustomerName": "Bob Wilson", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-02-10"), + "Amount": "$352.90" + }, + { + "OrderID": "ORD1341", + "CustomerName": "John Doe", + "Product": "Camera", + "Status": "Shipped", + "OrderDate": new Date("2025-04-14"), + "Amount": "$829.67" + }, + { + "OrderID": "ORD1342", + "CustomerName": "Jack Black", + "Product": "Laptop", + "Status": "Shipped", + "OrderDate": new Date("2025-02-25"), + "Amount": "$619.52" + }, + { + "OrderID": "ORD1343", + "CustomerName": "David Brown", + "Product": "Shirt", + "Status": "Shipped", + "OrderDate": new Date("2025-11-23"), + "Amount": "$240.51" + }, + { + "OrderID": "ORD1344", + "CustomerName": "Olivia Purple", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-21"), + "Amount": "$684.38" + }, + { + "OrderID": "ORD1345", + "CustomerName": "Eve Green", + "Product": "Shoes", + "Status": "Shipped", + "OrderDate": new Date("2025-07-28"), + "Amount": "$656.36" + }, + { + "OrderID": "ORD1346", + "CustomerName": "Paul Orange", + "Product": "Headphones", + "Status": "Delivered", + "OrderDate": new Date("2025-06-14"), + "Amount": "$292.56" + }, + { + "OrderID": "ORD1347", + "CustomerName": "Henry Taylor", + "Product": "Book", + "Status": "Shipped", + "OrderDate": new Date("2025-10-01"), + "Amount": "$741.30" + }, + { + "OrderID": "ORD1348", + "CustomerName": "Alice Johnson", + "Product": "Tablet", + "Status": "Shipped", + "OrderDate": new Date("2025-01-19"), + "Amount": "$997.20" + }, + { + "OrderID": "ORD1349", + "CustomerName": "Paul Orange", + "Product": "Watch", + "Status": "Delivered", + "OrderDate": new Date("2025-01-20"), + "Amount": "$19.17" + }, + { + "OrderID": "ORD1350", + "CustomerName": "Mia Blue", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-11-25"), + "Amount": "$547.87" + }, + { + "OrderID": "ORD1351", + "CustomerName": "Frank Miller", + "Product": "Shoes", + "Status": "Cancelled", + "OrderDate": new Date("2025-05-20"), + "Amount": "$200.88" + }, + { + "OrderID": "ORD1352", + "CustomerName": "Mia Blue", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-11-28"), + "Amount": "$264.69" + }, + { + "OrderID": "ORD1353", + "CustomerName": "Eve Green", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-10-18"), + "Amount": "$677.66" + }, + { + "OrderID": "ORD1354", + "CustomerName": "Alice Johnson", + "Product": "Book", + "Status": "Cancelled", + "OrderDate": new Date("2025-08-07"), + "Amount": "$520.13" + }, + { + "OrderID": "ORD1355", + "CustomerName": "Quinn Yellow", + "Product": "Bag", + "Status": "Shipped", + "OrderDate": new Date("2025-03-13"), + "Amount": "$482.68" + }, + { + "OrderID": "ORD1356", + "CustomerName": "Eve Green", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-05-01"), + "Amount": "$452.27" + }, + { + "OrderID": "ORD1357", + "CustomerName": "Mia Blue", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-05-14"), + "Amount": "$657.15" + }, + { + "OrderID": "ORD1358", + "CustomerName": "Jane Smith", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-06-07"), + "Amount": "$168.12" + }, + { + "OrderID": "ORD1359", + "CustomerName": "Bob Wilson", + "Product": "Bag", + "Status": "Delivered", + "OrderDate": new Date("2025-07-08"), + "Amount": "$618.48" + }, + { + "OrderID": "ORD1360", + "CustomerName": "Frank Miller", + "Product": "Camera", + "Status": "Shipped", + "OrderDate": new Date("2025-08-21"), + "Amount": "$750.26" + }, + { + "OrderID": "ORD1361", + "CustomerName": "Olivia Purple", + "Product": "Shoes", + "Status": "Cancelled", + "OrderDate": new Date("2025-10-03"), + "Amount": "$803.98" + }, + { + "OrderID": "ORD1362", + "CustomerName": "David Brown", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-09-27"), + "Amount": "$452.28" + }, + { + "OrderID": "ORD1363", + "CustomerName": "Henry Taylor", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-02-01"), + "Amount": "$830.49" + }, + { + "OrderID": "ORD1364", + "CustomerName": "Carol Davis", + "Product": "Book", + "Status": "Shipped", + "OrderDate": new Date("2025-03-26"), + "Amount": "$334.84" + }, + { + "OrderID": "ORD1365", + "CustomerName": "Leo Red", + "Product": "Bag", + "Status": "Shipped", + "OrderDate": new Date("2025-10-26"), + "Amount": "$493.94" + }, + { + "OrderID": "ORD1366", + "CustomerName": "Leo Red", + "Product": "Shirt", + "Status": "Cancelled", + "OrderDate": new Date("2025-03-09"), + "Amount": "$518.12" + }, + { + "OrderID": "ORD1367", + "CustomerName": "Kelly Gray", + "Product": "Shirt", + "Status": "Cancelled", + "OrderDate": new Date("2025-12-11"), + "Amount": "$808.85" + }, + { + "OrderID": "ORD1368", + "CustomerName": "Quinn Yellow", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-04-22"), + "Amount": "$582.53" + }, + { + "OrderID": "ORD1369", + "CustomerName": "Olivia Purple", + "Product": "Phone", + "Status": "Pending", + "OrderDate": new Date("2025-10-05"), + "Amount": "$994.18" + }, + { + "OrderID": "ORD1370", + "CustomerName": "Paul Orange", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-07-29"), + "Amount": "$188.18" + }, + { + "OrderID": "ORD1371", + "CustomerName": "Olivia Purple", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-08-18"), + "Amount": "$870.92" + }, + { + "OrderID": "ORD1372", + "CustomerName": "Quinn Yellow", + "Product": "Bag", + "Status": "Shipped", + "OrderDate": new Date("2025-12-01"), + "Amount": "$861.68" + }, + { + "OrderID": "ORD1373", + "CustomerName": "Alice Johnson", + "Product": "Shoes", + "Status": "Cancelled", + "OrderDate": new Date("2025-09-28"), + "Amount": "$136.07" + }, + { + "OrderID": "ORD1374", + "CustomerName": "Eve Green", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-08-26"), + "Amount": "$676.76" + }, + { + "OrderID": "ORD1375", + "CustomerName": "Olivia Purple", + "Product": "Shoes", + "Status": "Cancelled", + "OrderDate": new Date("2025-04-28"), + "Amount": "$255.04" + }, + { + "OrderID": "ORD1376", + "CustomerName": "Frank Miller", + "Product": "Laptop", + "Status": "Shipped", + "OrderDate": new Date("2025-02-27"), + "Amount": "$41.90" + }, + { + "OrderID": "ORD1377", + "CustomerName": "Noah Green", + "Product": "Shirt", + "Status": "Shipped", + "OrderDate": new Date("2025-04-16"), + "Amount": "$76.62" + }, + { + "OrderID": "ORD1378", + "CustomerName": "Leo Red", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-05-06"), + "Amount": "$743.14" + }, + { + "OrderID": "ORD1379", + "CustomerName": "Leo Red", + "Product": "Headphones", + "Status": "Shipped", + "OrderDate": new Date("2025-01-29"), + "Amount": "$148.73" + }, + { + "OrderID": "ORD1380", + "CustomerName": "David Brown", + "Product": "Book", + "Status": "Delivered", + "OrderDate": new Date("2025-10-23"), + "Amount": "$601.94" + }, + { + "OrderID": "ORD1381", + "CustomerName": "David Brown", + "Product": "Laptop", + "Status": "Shipped", + "OrderDate": new Date("2025-12-05"), + "Amount": "$526.04" + }, + { + "OrderID": "ORD1382", + "CustomerName": "Bob Wilson", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-10-13"), + "Amount": "$949.04" + }, + { + "OrderID": "ORD1383", + "CustomerName": "Olivia Purple", + "Product": "Shoes", + "Status": "Cancelled", + "OrderDate": new Date("2025-01-25"), + "Amount": "$972.57" + }, + { + "OrderID": "ORD1384", + "CustomerName": "Ivy White", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-07-29"), + "Amount": "$157.73" + }, + { + "OrderID": "ORD1385", + "CustomerName": "Alice Johnson", + "Product": "Shoes", + "Status": "Cancelled", + "OrderDate": new Date("2025-05-04"), + "Amount": "$850.85" + }, + { + "OrderID": "ORD1386", + "CustomerName": "Frank Miller", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-10-15"), + "Amount": "$418.55" + }, + { + "OrderID": "ORD1387", + "CustomerName": "Jack Black", + "Product": "Shoes", + "Status": "Shipped", + "OrderDate": new Date("2025-07-18"), + "Amount": "$250.43" + }, + { + "OrderID": "ORD1388", + "CustomerName": "Mia Blue", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-07-09"), + "Amount": "$101.54" + }, + { + "OrderID": "ORD1389", + "CustomerName": "Jane Smith", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-12-11"), + "Amount": "$608.92" + }, + { + "OrderID": "ORD1390", + "CustomerName": "Henry Taylor", + "Product": "Headphones", + "Status": "Shipped", + "OrderDate": new Date("2025-09-03"), + "Amount": "$216.80" + }, + { + "OrderID": "ORD1391", + "CustomerName": "Bob Wilson", + "Product": "Shirt", + "Status": "Shipped", + "OrderDate": new Date("2025-04-08"), + "Amount": "$962.46" + }, + { + "OrderID": "ORD1392", + "CustomerName": "Paul Orange", + "Product": "Headphones", + "Status": "Shipped", + "OrderDate": new Date("2025-07-23"), + "Amount": "$915.98" + }, + { + "OrderID": "ORD1393", + "CustomerName": "Bob Wilson", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-10-01"), + "Amount": "$652.23" + }, + { + "OrderID": "ORD1394", + "CustomerName": "John Doe", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-08-27"), + "Amount": "$107.62" + }, + { + "OrderID": "ORD1395", + "CustomerName": "Mia Blue", + "Product": "Headphones", + "Status": "Delivered", + "OrderDate": new Date("2025-06-10"), + "Amount": "$419.79" + }, + { + "OrderID": "ORD1396", + "CustomerName": "Frank Miller", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-10-11"), + "Amount": "$935.41" + }, + { + "OrderID": "ORD1397", + "CustomerName": "Bob Wilson", + "Product": "Watch", + "Status": "Shipped", + "OrderDate": new Date("2025-06-18"), + "Amount": "$237.72" + }, + { + "OrderID": "ORD1398", + "CustomerName": "Paul Orange", + "Product": "Shoes", + "Status": "Delivered", + "OrderDate": new Date("2025-05-12"), + "Amount": "$765.73" + }, + { + "OrderID": "ORD1399", + "CustomerName": "Paul Orange", + "Product": "Camera", + "Status": "Shipped", + "OrderDate": new Date("2025-06-30"), + "Amount": "$177.57" + }, + { + "OrderID": "ORD1400", + "CustomerName": "Paul Orange", + "Product": "Watch", + "Status": "Pending", + "OrderDate": new Date("2025-09-26"), + "Amount": "$43.49" + }, + { + "OrderID": "ORD1401", + "CustomerName": "Jane Smith", + "Product": "Shirt", + "Status": "Cancelled", + "OrderDate": new Date("2025-03-12"), + "Amount": "$844.12" + }, + { + "OrderID": "ORD1402", + "CustomerName": "Henry Taylor", + "Product": "Watch", + "Status": "Pending", + "OrderDate": new Date("2025-04-22"), + "Amount": "$510.68" + }, + { + "OrderID": "ORD1403", + "CustomerName": "Jane Smith", + "Product": "Book", + "Status": "Cancelled", + "OrderDate": new Date("2025-12-04"), + "Amount": "$492.98" + }, + { + "OrderID": "ORD1404", + "CustomerName": "Jack Black", + "Product": "Shoes", + "Status": "Cancelled", + "OrderDate": new Date("2025-01-07"), + "Amount": "$26.56" + }, + { + "OrderID": "ORD1405", + "CustomerName": "Jack Black", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-09-15"), + "Amount": "$815.03" + }, + { + "OrderID": "ORD1406", + "CustomerName": "Alice Johnson", + "Product": "Bag", + "Status": "Pending", + "OrderDate": new Date("2025-09-26"), + "Amount": "$157.41" + }, + { + "OrderID": "ORD1407", + "CustomerName": "Noah Green", + "Product": "Shoes", + "Status": "Delivered", + "OrderDate": new Date("2025-07-01"), + "Amount": "$274.65" + }, + { + "OrderID": "ORD1408", + "CustomerName": "Henry Taylor", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-08-24"), + "Amount": "$569.35" + }, + { + "OrderID": "ORD1409", + "CustomerName": "Bob Wilson", + "Product": "Bag", + "Status": "Pending", + "OrderDate": new Date("2025-02-17"), + "Amount": "$411.23" + }, + { + "OrderID": "ORD1410", + "CustomerName": "Jack Black", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-11-23"), + "Amount": "$19.36" + }, + { + "OrderID": "ORD1411", + "CustomerName": "Henry Taylor", + "Product": "Camera", + "Status": "Cancelled", + "OrderDate": new Date("2025-11-27"), + "Amount": "$786.53" + }, + { + "OrderID": "ORD1412", + "CustomerName": "Ivy White", + "Product": "Shirt", + "Status": "Shipped", + "OrderDate": new Date("2025-04-19"), + "Amount": "$902.26" + }, + { + "OrderID": "ORD1413", + "CustomerName": "John Doe", + "Product": "Shirt", + "Status": "Pending", + "OrderDate": new Date("2025-12-17"), + "Amount": "$926.33" + }, + { + "OrderID": "ORD1414", + "CustomerName": "Kelly Gray", + "Product": "Shirt", + "Status": "Shipped", + "OrderDate": new Date("2025-06-11"), + "Amount": "$25.50" + }, + { + "OrderID": "ORD1415", + "CustomerName": "Kelly Gray", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-09"), + "Amount": "$306.28" + }, + { + "OrderID": "ORD1416", + "CustomerName": "Kelly Gray", + "Product": "Tablet", + "Status": "Delivered", + "OrderDate": new Date("2025-07-16"), + "Amount": "$758.05" + }, + { + "OrderID": "ORD1417", + "CustomerName": "Henry Taylor", + "Product": "Shoes", + "Status": "Delivered", + "OrderDate": new Date("2025-01-28"), + "Amount": "$106.71" + }, + { + "OrderID": "ORD1418", + "CustomerName": "Henry Taylor", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-06-17"), + "Amount": "$39.33" + }, + { + "OrderID": "ORD1419", + "CustomerName": "Leo Red", + "Product": "Camera", + "Status": "Shipped", + "OrderDate": new Date("2025-07-02"), + "Amount": "$557.51" + }, + { + "OrderID": "ORD1420", + "CustomerName": "Olivia Purple", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-13"), + "Amount": "$774.45" + }, + { + "OrderID": "ORD1421", + "CustomerName": "David Brown", + "Product": "Bag", + "Status": "Pending", + "OrderDate": new Date("2025-05-18"), + "Amount": "$162.68" + }, + { + "OrderID": "ORD1422", + "CustomerName": "Quinn Yellow", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-02-24"), + "Amount": "$100.61" + }, + { + "OrderID": "ORD1423", + "CustomerName": "Leo Red", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-02-22"), + "Amount": "$141.18" + }, + { + "OrderID": "ORD1424", + "CustomerName": "Olivia Purple", + "Product": "Camera", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-22"), + "Amount": "$36.00" + }, + { + "OrderID": "ORD1425", + "CustomerName": "Jack Black", + "Product": "Bag", + "Status": "Delivered", + "OrderDate": new Date("2025-07-17"), + "Amount": "$22.22" + }, + { + "OrderID": "ORD1426", + "CustomerName": "Quinn Yellow", + "Product": "Bag", + "Status": "Shipped", + "OrderDate": new Date("2025-10-20"), + "Amount": "$525.89" + }, + { + "OrderID": "ORD1427", + "CustomerName": "Alice Johnson", + "Product": "Watch", + "Status": "Delivered", + "OrderDate": new Date("2025-06-04"), + "Amount": "$275.72" + }, + { + "OrderID": "ORD1428", + "CustomerName": "Henry Taylor", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-05-22"), + "Amount": "$426.89" + }, + { + "OrderID": "ORD1429", + "CustomerName": "Henry Taylor", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-05-07"), + "Amount": "$723.69" + }, + { + "OrderID": "ORD1430", + "CustomerName": "Noah Green", + "Product": "Book", + "Status": "Shipped", + "OrderDate": new Date("2025-08-23"), + "Amount": "$115.90" + }, + { + "OrderID": "ORD1431", + "CustomerName": "Eve Green", + "Product": "Tablet", + "Status": "Delivered", + "OrderDate": new Date("2025-11-14"), + "Amount": "$386.09" + }, + { + "OrderID": "ORD1432", + "CustomerName": "Leo Red", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-11-30"), + "Amount": "$974.48" + }, + { + "OrderID": "ORD1433", + "CustomerName": "Bob Wilson", + "Product": "Phone", + "Status": "Shipped", + "OrderDate": new Date("2025-09-03"), + "Amount": "$321.04" + }, + { + "OrderID": "ORD1434", + "CustomerName": "Mia Blue", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-10-22"), + "Amount": "$784.15" + }, + { + "OrderID": "ORD1435", + "CustomerName": "Quinn Yellow", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-07-06"), + "Amount": "$122.75" + }, + { + "OrderID": "ORD1436", + "CustomerName": "Kelly Gray", + "Product": "Shoes", + "Status": "Shipped", + "OrderDate": new Date("2025-12-16"), + "Amount": "$769.94" + }, + { + "OrderID": "ORD1437", + "CustomerName": "Leo Red", + "Product": "Headphones", + "Status": "Cancelled", + "OrderDate": new Date("2025-05-30"), + "Amount": "$832.97" + }, + { + "OrderID": "ORD1438", + "CustomerName": "Olivia Purple", + "Product": "Camera", + "Status": "Shipped", + "OrderDate": new Date("2025-11-21"), + "Amount": "$309.80" + }, + { + "OrderID": "ORD1439", + "CustomerName": "Frank Miller", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-07"), + "Amount": "$454.58" + }, + { + "OrderID": "ORD1440", + "CustomerName": "Kelly Gray", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-10-06"), + "Amount": "$46.40" + }, + { + "OrderID": "ORD1441", + "CustomerName": "Jack Black", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-02-25"), + "Amount": "$771.26" + }, + { + "OrderID": "ORD1442", + "CustomerName": "Alice Johnson", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-10-16"), + "Amount": "$983.77" + }, + { + "OrderID": "ORD1443", + "CustomerName": "Mia Blue", + "Product": "Tablet", + "Status": "Pending", + "OrderDate": new Date("2025-01-06"), + "Amount": "$107.62" + }, + { + "OrderID": "ORD1444", + "CustomerName": "Ivy White", + "Product": "Shoes", + "Status": "Shipped", + "OrderDate": new Date("2025-08-17"), + "Amount": "$380.38" + }, + { + "OrderID": "ORD1445", + "CustomerName": "Kelly Gray", + "Product": "Shoes", + "Status": "Shipped", + "OrderDate": new Date("2025-06-26"), + "Amount": "$997.73" + }, + { + "OrderID": "ORD1446", + "CustomerName": "Grace Lee", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-13"), + "Amount": "$124.91" + }, + { + "OrderID": "ORD1447", + "CustomerName": "Rose Pink", + "Product": "Laptop", + "Status": "Delivered", + "OrderDate": new Date("2025-08-22"), + "Amount": "$786.43" + }, + { + "OrderID": "ORD1448", + "CustomerName": "Paul Orange", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-19"), + "Amount": "$443.78" + }, + { + "OrderID": "ORD1449", + "CustomerName": "Mia Blue", + "Product": "Bag", + "Status": "Delivered", + "OrderDate": new Date("2025-01-23"), + "Amount": "$812.08" + }, + { + "OrderID": "ORD1450", + "CustomerName": "Eve Green", + "Product": "Phone", + "Status": "Pending", + "OrderDate": new Date("2025-12-13"), + "Amount": "$802.05" + }, + { + "OrderID": "ORD1451", + "CustomerName": "Ivy White", + "Product": "Watch", + "Status": "Shipped", + "OrderDate": new Date("2025-06-19"), + "Amount": "$564.25" + }, + { + "OrderID": "ORD1452", + "CustomerName": "David Brown", + "Product": "Tablet", + "Status": "Shipped", + "OrderDate": new Date("2025-04-06"), + "Amount": "$644.07" + }, + { + "OrderID": "ORD1453", + "CustomerName": "Quinn Yellow", + "Product": "Shirt", + "Status": "Shipped", + "OrderDate": new Date("2025-08-19"), + "Amount": "$596.28" + }, + { + "OrderID": "ORD1454", + "CustomerName": "Eve Green", + "Product": "Headphones", + "Status": "Shipped", + "OrderDate": new Date("2025-05-23"), + "Amount": "$754.80" + }, + { + "OrderID": "ORD1455", + "CustomerName": "Kelly Gray", + "Product": "Bag", + "Status": "Shipped", + "OrderDate": new Date("2025-07-07"), + "Amount": "$332.73" + }, + { + "OrderID": "ORD1456", + "CustomerName": "Grace Lee", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-09-28"), + "Amount": "$966.26" + }, + { + "OrderID": "ORD1457", + "CustomerName": "Noah Green", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-10-28"), + "Amount": "$123.09" + }, + { + "OrderID": "ORD1458", + "CustomerName": "Leo Red", + "Product": "Book", + "Status": "Shipped", + "OrderDate": new Date("2025-12-11"), + "Amount": "$708.93" + }, + { + "OrderID": "ORD1459", + "CustomerName": "Noah Green", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-12-11"), + "Amount": "$142.61" + }, + { + "OrderID": "ORD1460", + "CustomerName": "David Brown", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-04-04"), + "Amount": "$379.57" + }, + { + "OrderID": "ORD1461", + "CustomerName": "Ivy White", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-11-02"), + "Amount": "$146.49" + }, + { + "OrderID": "ORD1462", + "CustomerName": "Olivia Purple", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-11-22"), + "Amount": "$542.01" + }, + { + "OrderID": "ORD1463", + "CustomerName": "Jack Black", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-05-28"), + "Amount": "$148.89" + }, + { + "OrderID": "ORD1464", + "CustomerName": "Leo Red", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-07-03"), + "Amount": "$952.32" + }, + { + "OrderID": "ORD1465", + "CustomerName": "Frank Miller", + "Product": "Headphones", + "Status": "Cancelled", + "OrderDate": new Date("2025-10-15"), + "Amount": "$510.38" + }, + { + "OrderID": "ORD1466", + "CustomerName": "Olivia Purple", + "Product": "Camera", + "Status": "Cancelled", + "OrderDate": new Date("2025-12-30"), + "Amount": "$841.49" + }, + { + "OrderID": "ORD1467", + "CustomerName": "Alice Johnson", + "Product": "Bag", + "Status": "Pending", + "OrderDate": new Date("2025-04-23"), + "Amount": "$299.17" + }, + { + "OrderID": "ORD1468", + "CustomerName": "David Brown", + "Product": "Shoes", + "Status": "Delivered", + "OrderDate": new Date("2025-03-28"), + "Amount": "$782.93" + }, + { + "OrderID": "ORD1469", + "CustomerName": "Jack Black", + "Product": "Shoes", + "Status": "Pending", + "OrderDate": new Date("2025-10-21"), + "Amount": "$123.06" + }, + { + "OrderID": "ORD1470", + "CustomerName": "Rose Pink", + "Product": "Shoes", + "Status": "Pending", + "OrderDate": new Date("2025-08-14"), + "Amount": "$550.89" + }, + { + "OrderID": "ORD1471", + "CustomerName": "Grace Lee", + "Product": "Headphones", + "Status": "Delivered", + "OrderDate": new Date("2025-01-17"), + "Amount": "$455.24" + }, + { + "OrderID": "ORD1472", + "CustomerName": "Henry Taylor", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-05-02"), + "Amount": "$217.78" + }, + { + "OrderID": "ORD1473", + "CustomerName": "Noah Green", + "Product": "Tablet", + "Status": "Shipped", + "OrderDate": new Date("2025-11-12"), + "Amount": "$147.84" + }, + { + "OrderID": "ORD1474", + "CustomerName": "Carol Davis", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-09-30"), + "Amount": "$288.27" + }, + { + "OrderID": "ORD1475", + "CustomerName": "Alice Johnson", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-05-29"), + "Amount": "$577.01" + }, + { + "OrderID": "ORD1476", + "CustomerName": "Grace Lee", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-01-31"), + "Amount": "$992.56" + }, + { + "OrderID": "ORD1477", + "CustomerName": "Frank Miller", + "Product": "Headphones", + "Status": "Shipped", + "OrderDate": new Date("2025-12-31"), + "Amount": "$328.88" + }, + { + "OrderID": "ORD1478", + "CustomerName": "Quinn Yellow", + "Product": "Camera", + "Status": "Shipped", + "OrderDate": new Date("2025-10-23"), + "Amount": "$636.08" + }, + { + "OrderID": "ORD1479", + "CustomerName": "Quinn Yellow", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-11-21"), + "Amount": "$796.65" + }, + { + "OrderID": "ORD1480", + "CustomerName": "Quinn Yellow", + "Product": "Shoes", + "Status": "Delivered", + "OrderDate": new Date("2025-12-22"), + "Amount": "$936.97" + }, + { + "OrderID": "ORD1481", + "CustomerName": "Leo Red", + "Product": "Camera", + "Status": "Delivered", + "OrderDate": new Date("2025-10-25"), + "Amount": "$12.45" + }, + { + "OrderID": "ORD1482", + "CustomerName": "Leo Red", + "Product": "Phone", + "Status": "Pending", + "OrderDate": new Date("2025-10-01"), + "Amount": "$403.74" + }, + { + "OrderID": "ORD1483", + "CustomerName": "Carol Davis", + "Product": "Camera", + "Status": "Delivered", + "OrderDate": new Date("2025-06-15"), + "Amount": "$830.06" + }, + { + "OrderID": "ORD1484", + "CustomerName": "Jack Black", + "Product": "Book", + "Status": "Shipped", + "OrderDate": new Date("2025-10-17"), + "Amount": "$853.90" + }, + { + "OrderID": "ORD1485", + "CustomerName": "Jane Smith", + "Product": "Shirt", + "Status": "Pending", + "OrderDate": new Date("2025-11-17"), + "Amount": "$786.05" + }, + { + "OrderID": "ORD1486", + "CustomerName": "Eve Green", + "Product": "Bag", + "Status": "Shipped", + "OrderDate": new Date("2025-08-14"), + "Amount": "$461.95" + }, + { + "OrderID": "ORD1487", + "CustomerName": "Carol Davis", + "Product": "Watch", + "Status": "Delivered", + "OrderDate": new Date("2025-03-23"), + "Amount": "$875.68" + }, + { + "OrderID": "ORD1488", + "CustomerName": "Henry Taylor", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-02-12"), + "Amount": "$378.13" + }, + { + "OrderID": "ORD1489", + "CustomerName": "Jane Smith", + "Product": "Tablet", + "Status": "Delivered", + "OrderDate": new Date("2025-12-25"), + "Amount": "$757.68" + }, + { + "OrderID": "ORD1490", + "CustomerName": "Henry Taylor", + "Product": "Bag", + "Status": "Pending", + "OrderDate": new Date("2025-04-20"), + "Amount": "$482.04" + }, + { + "OrderID": "ORD1491", + "CustomerName": "Kelly Gray", + "Product": "Headphones", + "Status": "Cancelled", + "OrderDate": new Date("2025-01-05"), + "Amount": "$17.98" + }, + { + "OrderID": "ORD1492", + "CustomerName": "Grace Lee", + "Product": "Tablet", + "Status": "Shipped", + "OrderDate": new Date("2025-09-02"), + "Amount": "$80.12" + }, + { + "OrderID": "ORD1493", + "CustomerName": "Henry Taylor", + "Product": "Bag", + "Status": "Pending", + "OrderDate": new Date("2025-06-10"), + "Amount": "$373.89" + }, + { + "OrderID": "ORD1494", + "CustomerName": "Frank Miller", + "Product": "Tablet", + "Status": "Shipped", + "OrderDate": new Date("2025-11-25"), + "Amount": "$993.01" + }, + { + "OrderID": "ORD1495", + "CustomerName": "Henry Taylor", + "Product": "Shoes", + "Status": "Pending", + "OrderDate": new Date("2025-11-09"), + "Amount": "$653.52" + }, + { + "OrderID": "ORD1496", + "CustomerName": "Rose Pink", + "Product": "Headphones", + "Status": "Shipped", + "OrderDate": new Date("2025-07-30"), + "Amount": "$619.92" + }, + { + "OrderID": "ORD1497", + "CustomerName": "Carol Davis", + "Product": "Bag", + "Status": "Pending", + "OrderDate": new Date("2025-03-13"), + "Amount": "$754.92" + }, + { + "OrderID": "ORD1498", + "CustomerName": "Rose Pink", + "Product": "Tablet", + "Status": "Delivered", + "OrderDate": new Date("2025-03-13"), + "Amount": "$255.31" + }, + { + "OrderID": "ORD1499", + "CustomerName": "David Brown", + "Product": "Shoes", + "Status": "Delivered", + "OrderDate": new Date("2025-12-20"), + "Amount": "$36.56" + } +] +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/index.html b/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/index.html new file mode 100644 index 000000000..f27842a53 --- /dev/null +++ b/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/index.html @@ -0,0 +1,22 @@ + + + + + + ++ ++ ++ + + + + + + EJ2 Vue Sample + + + + + + + + + + +Loading....+ + + + diff --git a/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/index.js b/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/index.js new file mode 100644 index 000000000..881592f34 --- /dev/null +++ b/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/index.js @@ -0,0 +1,47 @@ +import Vue from "vue"; +import { GridPlugin,Page, Filter, Toolbar, Edit, Sort} from "@syncfusion/ej2-vue-grids"; +import { ordersTrackData } from "./datasource.js"; + +Vue.use(GridPlugin); + +new Vue({ + el: '#app', + template: ` +++`, + +data() { + return { + data: ordersTrackData, + selectionOptions : { persistSelection: true }, + toolbarSettings: ['Edit', 'Update', 'Cancel'], + filterSettings: { type: 'Excel' }, + editSettings: { allowEditing: true, allowAdding: false, allowDeleting: false }, + orderIDRules: { required: true }, + customerNameRules: { required: true }, + amountRules: { required: true } + }; +}, +methods:{ + isRowSelectable: function (data, columns) { + return data.Status !== 'Cancelled'; + } +}, + provide: { + grid: [Page, Filter, Toolbar, Edit, Sort] +} + +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/systemjs.config.js b/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/systemjs.config.js new file mode 100644 index 000000000..27de59df3 --- /dev/null +++ b/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/systemjs.config.js @@ -0,0 +1,40 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/31.2.12/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", +vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-dropdowns":"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js", + "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-grids": "syncfusion:ej2-vue-grids/dist/ej2-vue-grids.umd.min.js", + } +}); + +System.import('index.js'); \ No newline at end of file diff --git a/ej2-vue/code-snippet/image-editor/getting-started-cs37/app-composition.vue b/ej2-vue/code-snippet/image-editor/getting-started-cs37/app-composition.vue new file mode 100644 index 000000000..b00dfd2a6 --- /dev/null +++ b/ej2-vue/code-snippet/image-editor/getting-started-cs37/app-composition.vue @@ -0,0 +1,71 @@ + ++ ++ ++ + + + + + + ++ + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/image-editor/getting-started-cs37/app.vue b/ej2-vue/code-snippet/image-editor/getting-started-cs37/app.vue new file mode 100644 index 000000000..220beef54 --- /dev/null +++ b/ej2-vue/code-snippet/image-editor/getting-started-cs37/app.vue @@ -0,0 +1,80 @@ + ++ Fit Width +Fit Height +++ + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/image-editor/getting-started-cs37/index.css b/ej2-vue/code-snippet/image-editor/getting-started-cs37/index.css new file mode 100644 index 000000000..c9960639e --- /dev/null +++ b/ej2-vue/code-snippet/image-editor/getting-started-cs37/index.css @@ -0,0 +1,16 @@ + + + + + + + + + + + + +#image-editor { + width: 550px !important; + height: 350px !important; +} diff --git a/ej2-vue/code-snippet/image-editor/getting-started-cs37/index.html b/ej2-vue/code-snippet/image-editor/getting-started-cs37/index.html new file mode 100644 index 000000000..303d777bf --- /dev/null +++ b/ej2-vue/code-snippet/image-editor/getting-started-cs37/index.html @@ -0,0 +1,23 @@ + + + + + + ++ Fit Width +Fit Height +EJ2 Vue Sample + + + + + + + + + + + +Loading....+ + + + diff --git a/ej2-vue/code-snippet/image-editor/getting-started-cs37/index.js b/ej2-vue/code-snippet/image-editor/getting-started-cs37/index.js new file mode 100644 index 000000000..da1c2e4d0 --- /dev/null +++ b/ej2-vue/code-snippet/image-editor/getting-started-cs37/index.js @@ -0,0 +1,60 @@ + +import Vue from 'vue'; +import { ImageEditorPlugin } from "@syncfusion/ej2-vue-image-editor"; +import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons'; +import { Browser } from "@syncfusion/ej2-base"; + +Vue.use(ImageEditorPlugin); +Vue.use(ButtonPlugin); + +new Vue({ + el: '#app', + template: ` +++ `, + data: function () { + return { + }; + }, + methods: { + created: function () { + let imageEditor = this.$refs.imageEditorObj.ej2Instances; + if (!imageEditor) return; + let imageUrl = Browser.isDevice + ? "https://ej2.syncfusion.com/vue/documentation/image-editor/images/flower.jpeg" + : "https://ej2.syncfusion.com/vue/documentation/image-editor/images/bridge.jpeg"; + imageEditor.open(imageUrl); + }, + btnClick: function () { + let imageEditorObj = this.$refs.imageEditorObj.ej2Instances; + imageEditorObj.zoom(1); // Reset zoom to original size before applying Fit Width + const containerWidth = imageEditorObj.upperCanvas.width; + const { width: oldWidth } = imageEditorObj.getImageDimension(); + let imageWidth = oldWidth, zoomFactor = 0.1, newZoom = 1; + while (imageWidth < containerWidth) { + newZoom++; + imageWidth = oldWidth * (1 + zoomFactor); + zoomFactor += 0.1; + } + imageEditorObj.zoom(newZoom); + }, + btnClick: function () { + let imageEditorObj = this.$refs.imageEditorObj.ej2Instances; + imageEditorObj.zoom(1); // Reset zoom to original size before applying Fit Height + const containerHeight = imageEditorObj.upperCanvas.height; + const { height: oldHeight } = imageEditorObj.getImageDimension(); + let imageHeight = oldHeight, zoomFactor = 0.1, newZoom = 1; + while (imageHeight < containerHeight) { + newZoom++; + imageHeight = oldHeight * (1 + zoomFactor); + zoomFactor += 0.1; + } + imageEditorObj.zoom(newZoom); + } + } + +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/image-editor/getting-started-cs37/systemjs.config.js b/ej2-vue/code-snippet/image-editor/getting-started-cs37/systemjs.config.js new file mode 100644 index 000000000..93bc62d4f --- /dev/null +++ b/ej2-vue/code-snippet/image-editor/getting-started-cs37/systemjs.config.js @@ -0,0 +1,38 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/28.2.9/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", +vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + '@syncfusion/ej2-vue-image-editor': 'syncfusion:ej2-vue-image-editor/dist/ej2-vue-image-editor.umd.min.js', + '@syncfusion/ej2-vue-base': 'syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js', + '@syncfusion/ej2-base': 'syncfusion:ej2-base/dist/ej2-base.umd.min.js', + '@syncfusion/ej2-data': "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + '@syncfusion/ej2-buttons': 'syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js', + '@syncfusion/ej2-vue-buttons': 'syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js', + '@syncfusion/ej2-popups': 'syncfusion:ej2-popups/dist/ej2-popups.umd.min.js', + '@syncfusion/ej2-vue-popups': 'syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js', + '@syncfusion/ej2-inputs': 'syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js', + '@syncfusion/ej2-vue-inputs': 'syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js', + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + '@syncfusion/ej2-vue-splitbuttons': 'syncfusion:ej2-vue-splitbuttons/dist/ej2-vue-splitbuttons.umd.min.js', + '@syncfusion/ej2-lists': "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + '@syncfusion/ej2-vue-lists': "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js", + '@syncfusion/ej2-navigations': 'syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js', + '@syncfusion/ej2-vue-navigations': 'syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js', + '@syncfusion/ej2-image-editor': 'syncfusion:ej2-image-editor/dist/ej2-image-editor.umd.min.js', + } +}); + +System.import('index.js'); diff --git a/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup-customize/app-composition.vue b/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup-customize/app-composition.vue new file mode 100644 index 000000000..4614c8fdd --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup-customize/app-composition.vue @@ -0,0 +1,31 @@ + ++ Fit Width +Fit Height +++ + + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup-customize/app.vue b/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup-customize/app.vue new file mode 100644 index 000000000..9c479ff19 --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup-customize/app.vue @@ -0,0 +1,39 @@ + ++ ++ + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup-customize/index.css b/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup-customize/index.css new file mode 100644 index 000000000..e3c0074c9 --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup-customize/index.css @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup-customize/index.html b/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup-customize/index.html new file mode 100644 index 000000000..a1acaea7d --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup-customize/index.html @@ -0,0 +1,23 @@ + + + + + + ++ EJ2 Vue Sample + + + + + + + + + + + +Loading....+ + + + diff --git a/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup-customize/index.js b/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup-customize/index.js new file mode 100644 index 000000000..1d3af0cc8 --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup-customize/index.js @@ -0,0 +1,23 @@ +import Vue from "vue"; +import { RichTextEditorPlugin, Toolbar, HtmlEditor, ClipboardCleanup } from "@syncfusion/ej2-vue-richtexteditor"; +import { detach } from '@syncfusion/ej2-base'; + +Vue.use(RichTextEditorPlugin); + +new Vue({ + el: '#app', + template: `+`, + methods: { + beforeClipboardWrite: function(args){ + if (args.operation === 'copy') { + args.htmlContent = '+ This is customized content triggered while copy event
'; + args.plainTextContent = 'This is customized content triggered while copy event'; + } + } + }, + provide:{ + richtexteditor:[Toolbar, HtmlEditor, ClipboardCleanup] + } +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup-customize/systemjs.config.js b/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup-customize/systemjs.config.js new file mode 100644 index 000000000..4fb3f760e --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup-customize/systemjs.config.js @@ -0,0 +1,50 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.1/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", +vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js", + "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-data": "syncfusion:ej2-vue-data/dist/ej2-vue-data.umd.min.js", + "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js", + "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js", + "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js", + "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js", + "@syncfusion/ej2-vue-splitbuttons": "syncfusion:ej2-vue-splitbuttons/dist/ej2-vue-splitbuttons.umd.min.js", + "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js", + "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js", + "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js" + } +}); + +System.import('index.js'); \ No newline at end of file diff --git a/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup/app-composition.vue b/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup/app-composition.vue new file mode 100644 index 000000000..d72812d78 --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup/app-composition.vue @@ -0,0 +1,24 @@ + +++ + + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup/app.vue b/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup/app.vue new file mode 100644 index 000000000..98c40af7d --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup/app.vue @@ -0,0 +1,30 @@ + ++ ++ + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup/index.css b/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup/index.css new file mode 100644 index 000000000..e3c0074c9 --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup/index.css @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup/index.html b/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup/index.html new file mode 100644 index 000000000..a1acaea7d --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup/index.html @@ -0,0 +1,23 @@ + + + + + + ++ EJ2 Vue Sample + + + + + + + + + + + +Loading....+ + + + diff --git a/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup/index.js b/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup/index.js new file mode 100644 index 000000000..ec76a0f8c --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup/index.js @@ -0,0 +1,14 @@ +import Vue from "vue"; +import { RichTextEditorPlugin, Toolbar, HtmlEditor, ClipboardCleanup } from "@syncfusion/ej2-vue-richtexteditor"; + +Vue.use(RichTextEditorPlugin); + +new Vue({ + el: '#app', + template: `+`, + provide:{ + richtexteditor:[Toolbar, HtmlEditor, ClipboardCleanup] + } +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup/systemjs.config.js b/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup/systemjs.config.js new file mode 100644 index 000000000..833ed0107 --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/clipboard-cleanup/systemjs.config.js @@ -0,0 +1,49 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.1/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", +vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js", + "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-data": "syncfusion:ej2-vue-data/dist/ej2-vue-data.umd.min.js", + "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js", + "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js", + "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js", + "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js", + "@syncfusion/ej2-vue-splitbuttons": "syncfusion:ej2-vue-splitbuttons/dist/ej2-vue-splitbuttons.umd.min.js", + "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js", + "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js" + } +}); + +System.import('index.js'); \ No newline at end of file diff --git a/ej2-vue/code-snippet/rich-text-editor/line-height-cs1/app-composition.vue b/ej2-vue/code-snippet/rich-text-editor/line-height-cs1/app-composition.vue new file mode 100644 index 000000000..8e7f32a7b --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/line-height-cs1/app-composition.vue @@ -0,0 +1,40 @@ + ++ + + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/rich-text-editor/line-height-cs1/app.vue b/ej2-vue/code-snippet/rich-text-editor/line-height-cs1/app.vue new file mode 100644 index 000000000..8e69a318e --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/line-height-cs1/app.vue @@ -0,0 +1,50 @@ + + + + + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/rich-text-editor/line-height-cs1/index.css b/ej2-vue/code-snippet/rich-text-editor/line-height-cs1/index.css new file mode 100644 index 000000000..e3c0074c9 --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/line-height-cs1/index.css @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/ej2-vue/code-snippet/rich-text-editor/line-height-cs1/index.html b/ej2-vue/code-snippet/rich-text-editor/line-height-cs1/index.html new file mode 100644 index 000000000..303d777bf --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/line-height-cs1/index.html @@ -0,0 +1,23 @@ + + + + + + +EJ2 Vue Sample + + + + + + + + + + + +Loading....+ + + + diff --git a/ej2-vue/code-snippet/rich-text-editor/line-height-cs1/index.js b/ej2-vue/code-snippet/rich-text-editor/line-height-cs1/index.js new file mode 100644 index 000000000..514669ba8 --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/line-height-cs1/index.js @@ -0,0 +1,35 @@ +import Vue from 'vue'; +import { RichTextEditorPlugin, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-vue-richtexteditor'; + +Vue.use(RichTextEditorPlugin); + +new Vue({ + el: '#app', + template: ``, + + data() { + return { + toolbarSettings: { + items: [ 'LineHeight'] + }, + rteValue: ` 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:
+ + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/rich-text-editor/line-height/app.vue b/ej2-vue/code-snippet/rich-text-editor/line-height/app.vue new file mode 100644 index 000000000..3a2a4c228 --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/line-height/app.vue @@ -0,0 +1,36 @@ + + + + + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/rich-text-editor/line-height/index.css b/ej2-vue/code-snippet/rich-text-editor/line-height/index.css new file mode 100644 index 000000000..e3c0074c9 --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/line-height/index.css @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/ej2-vue/code-snippet/rich-text-editor/line-height/index.html b/ej2-vue/code-snippet/rich-text-editor/line-height/index.html new file mode 100644 index 000000000..303d777bf --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/line-height/index.html @@ -0,0 +1,23 @@ + + + + + + +EJ2 Vue Sample + + + + + + + + + + + +Loading....+ + + + diff --git a/ej2-vue/code-snippet/rich-text-editor/line-height/index.js b/ej2-vue/code-snippet/rich-text-editor/line-height/index.js new file mode 100644 index 000000000..38225e55b --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/line-height/index.js @@ -0,0 +1,21 @@ +import Vue from 'vue'; +import { RichTextEditorPlugin, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-vue-richtexteditor'; + +Vue.use(RichTextEditorPlugin); + +new Vue({ + el: '#app', + template: ``, + + data() { + return { + toolbarSettings: { + items: [ 'LineHeight'] + }, + rteValue: ` 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:
++ + + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/app.vue b/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/app.vue new file mode 100644 index 000000000..44b4af13c --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/app.vue @@ -0,0 +1,179 @@ + + +++++++ ++ + + + + + + {{ formatMentionTemplate(data.value) }} + + +++ + + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/index.css b/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/index.css new file mode 100644 index 000000000..e3c0074c9 --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/index.css @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/index.html b/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/index.html new file mode 100644 index 000000000..303d777bf --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/index.html @@ -0,0 +1,23 @@ + + + + + + ++++++++ + + + + {{ formatMentionTemplate(data.value) }} + + +EJ2 Vue Sample + + + + + + + + + + + +Loading....+ + + + diff --git a/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/index.js b/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/index.js new file mode 100644 index 000000000..b2de4e57c --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/index.js @@ -0,0 +1,161 @@ +import Vue from 'vue'; +import { RichTextEditorPlugin, Toolbar, Link, Image, QuickToolbar, HtmlEditor, Table, Video, NodeSelection, Audio, PasteCleanup } from '@syncfusion/ej2-vue-richtexteditor'; +import { MentionPlugin } from '@syncfusion/ej2-vue-dropdowns'; +import { DropDownButtonPlugin } from '@syncfusion/ej2-vue-splitbuttons'; +Vue.use(RichTextEditorPlugin); +Vue.use(MentionPlugin); +Vue.use(DropDownButtonPlugin); + +new Vue({ + el: '#app', + template: `+`, + + data() { + return { + selection: new NodeSelection(), + saveInterval: 1, + ranges: null, + saveSelection: null, + value: `+++++++ + + + + {{ formatMentionTemplate(data.value) }} + + +Dear {{FirstName}} {{LastName}},
+We are thrilled to have you with us! Your unique promotional code for this month is: {{PromoCode}}.
+Your current subscription plan is: {{SubscriptionPlan}}.
+Your customer ID is: {{CustomerID}}.
+Your promotional code expires on: {{ExpirationDate}}.
+Feel free to browse our latest offerings and updates. If you need any assistance, don't hesitate to contact us at {{SupportEmail}} or call us at {{SupportPhoneNumber}}.
+Best regards,
`, + dropdownContent: `Insert Field`, + itemsName: [ + { text: 'First Name' }, + { text: 'Last Name' }, + { text: 'Support Email' }, + { text: 'Company Name' }, + { text: 'Promo Code' }, + { text: 'Support Phone Number' }, + { text: 'Customer ID' }, + { text: 'Expiration Date' }, + { text: 'Subscription Plan' }, + ], + placeholderData: { + FirstName: 'John', + LastName: 'Doe', + PromoCode: 'ABC123', + SubscriptionPlan: 'Premium', + CustomerID: '123456', + ExpirationDate: '2024-12-31', + SupportEmail: 'support@example.com', + SupportPhoneNumber: '+1-800-555-5555', + CompanyName: 'Example Inc.', + }, + textToValueMap: { + 'First Name': 'FirstName', + 'Last Name': 'LastName', + 'Support Email': 'SupportEmail', + 'Company Name': 'CompanyName', + 'Promo Code': 'PromoCode', + 'Support Phone Number': 'SupportPhoneNumber', + 'Customer ID': 'CustomerID', + 'Expiration Date': 'ExpirationDate', + 'Subscription Plan': 'SubscriptionPlan', + }, + mergeData: [ + { text: 'First Name', value: 'FirstName' }, + { text: 'Last Name', value: 'LastName' }, + { text: 'Support Email', value: 'SupportEmail' }, + { text: 'Company Name', value: 'CompanyName' }, + { text: 'Promo Code', value: 'PromoCode' }, + { text: 'Support Phone Number', value: 'SupportPhoneNumber' }, + { text: 'Customer ID', value: 'CustomerID' }, + { text: 'Expiration Date', value: 'ExpirationDate' }, + { text: 'Subscription Plan', value: 'SubscriptionPlan' }, + ], + fieldsData: { text: 'text', value: 'value' }, + mentionChar: '{{', + toolbarSettings: { + items: [ + 'Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', 'CreateTable', '|', + { tooltipText: 'Merge Data', template: '#merge_data', command: 'Custom' }, + { tooltipText: 'Insert Field', template: '#insertField', command: 'Custom' }, + 'SourceCode', '|', 'Undo', 'Redo', + ], + }, + } + }, + provide: { + richtexteditor: [Toolbar, Link, Image, HtmlEditor, QuickToolbar] + }, + methods: { + onDropDownClose() { + if (this.$refs.rteObj && this.$refs.rteObj.ej2Instances) { + this.$refs.rteObj.ej2Instances.focusIn(); +} + }, + formatMentionTemplate(value) { + return `{{${value}}}`; + }, + displayTemplate(data) { + return `${data.value}`; + }, + onItemSelect: function(args) { + if (args && args.item && args.item.text) { + const value = this.textToValueMap[args.item.text.trim()]; + if (value && this.$refs.rteObj && this.$refs.rteObj.ej2Instances) { + this.$refs.rteObj.ej2Instances.formatter.editorManager.nodeSelection.restore(); + this.$refs.rteObj.ej2Instances.executeCommand('insertHTML', `{{${value}}} `, { undo: true }); + } else { + console.log('No matching value found in textToValueMap or RichTextEditor is not initialized.'); + } + } + }, + onActionBegin(args) { + if (args.requestType === 'EnterAction' && this.$refs.mentionObj && this.$refs.mentionObj.ej2Instances && this.$refs.mentionObj.ej2Instances.element.classList.contains('e-popup-open')) { + args.cancel = true; + } + }, + OnActionComplete(e) { + if (e.requestType === 'SourceCode') { + this.$refs.rteObj.ej2Instances.getToolbar().querySelector('#merge_data').parentElement.classList.add('e-overlay'); + this.$refs.rteObj.ej2Instances.getToolbar().querySelector('#insertField').parentElement.classList.add('e-overlay'); + } else if (e.requestType === 'Preview') { + this.$refs.rteObj.ej2Instances.getToolbar().querySelector('#merge_data').parentElement.classList.remove('e-overlay'); + this.$refs.rteObj.ej2Instances.getToolbar().querySelector('#insertField').parentElement.classList.remove('e-overlay'); + } + }, + onClickHandler() { + if (this.$refs.rteObj && this.$refs.rteObj.ej2Instances) { + let editorContent = this.$refs.rteObj.ej2Instances.value || ''; + let mergedContent = this.replacePlaceholders(editorContent, this.placeholderData); + if (this.$refs.rteObj.ej2Instances.formatter.getUndoRedoStack() && this.$refs.rteObj.ej2Instances.formatter.getUndoRedoStack().length === 0) { + this.$refs.rteObj.ej2Instances.formatter.saveData(); + } + this.value = mergedContent; + this.$refs.rteObj.ej2Instances.formatter.saveData(); + this.$refs.rteObj.trigger('change'); + } else { + console.log('MailMergeEditor is not initialized.'); + } + }, + replacePlaceholders(template, data) { + return template.replace(/{{\s*(\w+)\s*}}/g, (match, key) => { + const value = data[key.trim()]; + return value !== undefined ? value : match; + }); + }, + } +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/systemjs.config.js b/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/systemjs.config.js new file mode 100644 index 000000000..7f1950c45 --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/systemjs.config.js @@ -0,0 +1,50 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", +vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js", + "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-data": "syncfusion:ej2-vue-data/dist/ej2-vue-data.umd.min.js", + "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js", + "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js", + "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js", + "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js", + "@syncfusion/ej2-vue-splitbuttons": "syncfusion:ej2-vue-splitbuttons/dist/ej2-vue-splitbuttons.umd.min.js", + "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js", + "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js", + "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js" + } +}); + +System.import('index.js'); \ No newline at end of file diff --git a/ej2-vue/code-snippet/rich-text-editor/mail-merge/index.js b/ej2-vue/code-snippet/rich-text-editor/mail-merge/index.js index b2de4e57c..e62b5b324 100644 --- a/ej2-vue/code-snippet/rich-text-editor/mail-merge/index.js +++ b/ej2-vue/code-snippet/rich-text-editor/mail-merge/index.js @@ -1,3 +1,4 @@ +{% raw %} import Vue from 'vue'; import { RichTextEditorPlugin, Toolbar, Link, Image, QuickToolbar, HtmlEditor, Table, Video, NodeSelection, Audio, PasteCleanup } from '@syncfusion/ej2-vue-richtexteditor'; import { MentionPlugin } from '@syncfusion/ej2-vue-dropdowns'; @@ -158,4 +159,5 @@ new Vue({ }); }, } -}); \ No newline at end of file +}); +{% endraw %} \ No newline at end of file diff --git a/ej2-vue/code-snippet/rich-text-editor/markdown-autoformat-cs1/app-composition.vue b/ej2-vue/code-snippet/rich-text-editor/markdown-autoformat-cs1/app-composition.vue new file mode 100644 index 000000000..0efebb1a5 --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/markdown-autoformat-cs1/app-composition.vue @@ -0,0 +1,26 @@ + +
The {{CompanyName}} Team+ + + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/rich-text-editor/markdown-autoformat-cs1/app.vue b/ej2-vue/code-snippet/rich-text-editor/markdown-autoformat-cs1/app.vue new file mode 100644 index 000000000..1f8f981cb --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/markdown-autoformat-cs1/app.vue @@ -0,0 +1,36 @@ + ++ + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/rich-text-editor/markdown-autoformat-cs1/index.html b/ej2-vue/code-snippet/rich-text-editor/markdown-autoformat-cs1/index.html new file mode 100644 index 000000000..303d777bf --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/markdown-autoformat-cs1/index.html @@ -0,0 +1,23 @@ + + + + + + + EJ2 Vue Sample + + + + + + + + + + + +Loading....+ + + + diff --git a/ej2-vue/code-snippet/rich-text-editor/markdown-autoformat-cs1/index.js b/ej2-vue/code-snippet/rich-text-editor/markdown-autoformat-cs1/index.js new file mode 100644 index 000000000..67d911553 --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/markdown-autoformat-cs1/index.js @@ -0,0 +1,21 @@ +import Vue from 'vue'; +import { RichTextEditorPlugin, Toolbar, Link, Image, HtmlEditor, QuickToolbar, AutoFormat } from '@syncfusion/ej2-vue-richtexteditor'; + +Vue.use(RichTextEditorPlugin); + +new Vue({ + el: '#app', + template: ``, + + data() { + return { + rteValue: ` 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.
`, + } + }, + provide: { + richtexteditor: [Toolbar, Link, Image, HtmlEditor, QuickToolbar, AutoFormat] + } +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/rich-text-editor/markdown-autoformat-cs1/systemjs.config.js b/ej2-vue/code-snippet/rich-text-editor/markdown-autoformat-cs1/systemjs.config.js new file mode 100644 index 000000000..7f1950c45 --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/markdown-autoformat-cs1/systemjs.config.js @@ -0,0 +1,50 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", +vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js", + "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-data": "syncfusion:ej2-vue-data/dist/ej2-vue-data.umd.min.js", + "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js", + "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js", + "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js", + "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js", + "@syncfusion/ej2-vue-splitbuttons": "syncfusion:ej2-vue-splitbuttons/dist/ej2-vue-splitbuttons.umd.min.js", + "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js", + "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js", + "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js" + } +}); + +System.import('index.js'); \ No newline at end of file diff --git a/ej2-vue/code-snippet/rich-text-editor/selection/index.js b/ej2-vue/code-snippet/rich-text-editor/selection/index.js index c241e3bee..868447a47 100644 --- a/ej2-vue/code-snippet/rich-text-editor/selection/index.js +++ b/ej2-vue/code-snippet/rich-text-editor/selection/index.js @@ -2,7 +2,7 @@ import Vue from "vue"; import { RichTextEditorPlugin, Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table, CodeBlock } from "@syncfusion/ej2-vue-richtexteditor"; import { SliderPlugin } from "@syncfusion/ej2-vue-inputs"; Vue.use(RichTextEditorPlugin); -Vue.use(RichTextEditorPlugin); +Vue.use(SliderPlugin); new Vue({ el: '#app', diff --git a/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs1/app-composition.vue b/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs1/app-composition.vue new file mode 100644 index 000000000..b85bdc7d3 --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs1/app-composition.vue @@ -0,0 +1,176 @@ + +++ + diff --git a/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs1/app.vue b/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs1/app.vue new file mode 100644 index 000000000..f879ad40a --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs1/app.vue @@ -0,0 +1,192 @@ + ++ ++ ++ + + + + + + + + + + + + + + + ++ + diff --git a/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs1/datasource.js b/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs1/datasource.js new file mode 100644 index 000000000..4d053cbb1 --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs1/datasource.js @@ -0,0 +1,221 @@ +define(["require", "exports"], function (require, exports) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.columnSpanData = [ + { + 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-vue/code-snippet/treegrid/columns/column-spanning-cs1/index.html b/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs1/index.html new file mode 100644 index 000000000..303d777bf --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs1/index.html @@ -0,0 +1,23 @@ + + + + + + ++ ++ ++ + + + + + + + + + + + + + + + EJ2 Vue Sample + + + + + + + + + + + +Loading....+ + + + diff --git a/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs1/index.js b/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs1/index.js new file mode 100644 index 000000000..085e643c9 --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs1/index.js @@ -0,0 +1,188 @@ + +import Vue from "vue"; +import { TreeGridPlugin } from "@syncfusion/ej2-vue-treegrid"; +import { columnSpanData } from "./datasource.js"; + +Vue.use(TreeGridPlugin); + + +new Vue({ + el: '#app', + template: ` +++`, + + data() { + return { + data: columnSpanData, + }; + }, + + methods: { + queryCellInfoEvent: function (args) { + let data = args.data; + switch (data.EmployeeID) { + case 10001: + if ( + args.column.field === "9:00" || + args.column.field === "2:30" || + args.column.field === "4:30" + ) { + args.colSpan = 2; + } else if (args.column.field === "11:00") { + args.colSpan = 3; + } + break; + case 10002: + if ( + args.column.field === "9:30" || + args.column.field === "2:30" || + args.column.field === "4:30" + ) { + args.colSpan = 3; + } else if (args.column.field === "11:00") { + args.colSpan = 4; + } + break; + case 10003: + if (args.column.field === "9:00" || args.column.field === "11:30") { + args.colSpan = 3; + } else if ( + args.column.field === "10:30" || + args.column.field === "3:30" || + args.column.field === "4:30" || + args.column.field === "2:30" + ) { + args.colSpan = 2; + } + break; + case 10004: + if (args.column.field === "9:00") { + args.colSpan = 3; + } else if (args.column.field === "11:00") { + args.colSpan = 4; + } else if ( + args.column.field === "4:00" || + args.column.field === "2:30" + ) { + args.colSpan = 2; + } + break; + case 10005: + if (args.column.field === "9:00") { + args.colSpan = 4; + } else if (args.column.field === "11:30") { + args.colSpan = 3; + } else if ( + args.column.field === "3:30" || + args.column.field === "4:30" || + args.column.field === "2:30" + ) { + args.colSpan = 2; + } + break; + case 10006: + if ( + args.column.field === "9:00" || + args.column.field === "4:30" || + args.column.field === "2:30" || + args.column.field === "3:30" + ) { + args.colSpan = 2; + } else if ( + args.column.field === "10:00" || + args.column.field === "11:30" + ) { + args.colSpan = 3; + } + break; + case 10007: + if ( + args.column.field === "9:00" || + args.column.field === "3:00" || + args.column.field === "10:30" + ) { + args.colSpan = 2; + } else if ( + args.column.field === "11:30" || + args.column.field === "4:00" + ) { + args.colSpan = 3; + } + break; + case 10008: + if ( + args.column.field === "9:00" || + args.column.field === "10:30" || + args.column.field === "2:30" + ) { + args.colSpan = 3; + } else if (args.column.field === "4:00") { + args.colSpan = 2; + } + break; + case 10009: + if (args.column.field === "9:00" || args.column.field === "11:30") { + args.colSpan = 3; + } else if ( + args.column.field === "4:30" || + args.column.field === "2:30" + ) { + args.colSpan = 2; + } + break; + case 100010: + if ( + args.column.field === "9:00" || + args.column.field === "2:30" || + args.column.field === "4:00" || + args.column.field === "11:30" + ) { + args.colSpan = 3; + } else if (args.column.field === "10:30") { + args.colSpan = 2; + } + break; + } + } + }, +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs1/systemjs.config.js b/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs1/systemjs.config.js new file mode 100644 index 000000000..b0f3cc1b3 --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs1/systemjs.config.js @@ -0,0 +1,45 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", +vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-dropdowns":"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-grids": "syncfusion:ej2-vue-grids/dist/ej2-vue-grids.umd.min.js", + "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js", + "@syncfusion/ej2-vue-treegrid": "syncfusion:ej2-vue-treegrid/dist/ej2-vue-treegrid.umd.min.js", + "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-vue-charts": "syncfusion:ej2-vue-charts/dist/ej2-vue-charts.umd.min.js" + + } +}); + +System.import('index.js'); \ No newline at end of file diff --git a/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs2/app-composition.vue b/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs2/app-composition.vue new file mode 100644 index 000000000..3f80a8ee6 --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs2/app-composition.vue @@ -0,0 +1,96 @@ + ++ ++ ++ + + + + + + + + + + + + + + + ++ + diff --git a/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs2/app.vue b/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs2/app.vue new file mode 100644 index 000000000..3fead1a23 --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs2/app.vue @@ -0,0 +1,71 @@ + ++ ++ ++ + + + + + + ++ + \ No newline at end of file diff --git a/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs2/datasource.js b/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs2/datasource.js new file mode 100644 index 000000000..13e3db939 --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs2/datasource.js @@ -0,0 +1,794 @@ +define(["require", "exports"], function (require, exports) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.columnSpanData = [ + { + 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-vue/code-snippet/treegrid/columns/column-spanning-cs2/index.html b/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs2/index.html new file mode 100644 index 000000000..303d777bf --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs2/index.html @@ -0,0 +1,23 @@ + + + + + + ++ ++ ++ + + + + + + EJ2 Vue Sample + + + + + + + + + + + +Loading....+ + + + diff --git a/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs2/index.js b/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs2/index.js new file mode 100644 index 000000000..94ad2639f --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs2/index.js @@ -0,0 +1,132 @@ +import Vue from "vue"; +import { TreeGridPlugin, Page, Freeze } from "@syncfusion/ej2-vue-treegrid"; +import { columnSpanData } from "./datasource.js"; + +Vue.use(TreeGridPlugin, Page, Freeze); + +new Vue({ + el: "#app", + template: ` +++ `, + + data() { + return { + data: columnSpanData, + pageSettings: { pageSizeMode: "All", pageSize: 18 }, + scheduleColumns: [ + { + field: "startDate", + headerText: "Start Date", + type: "date", + format: "MM/dd/yyyy", + width: 140, + textAlign: "Center", + }, + { + field: "endDate", + headerText: "End Date", + type: "date", + format: "MM/dd/yyyy", + width: 140, + textAlign: "Center", + }, + ], + personnelColumns: [ + { + field: "supervisor", + headerText: "Supervisor", + width: 180, + }, + { field: "team", headerText: "Crew", width: 200 }, + ], + statusColumns: [ + { + field: "status", + headerText: "Status", + width: 180, + textAlign: "Center", + }, + ], + complianceColumns: [ + { + field: "permitStatus", + headerText: "Permit Status", + width: 160, + textAlign: "Center", + }, + { + field: "inspectionDate", + headerText: "Inspection Date", + width: 180, + type: "date", + format: "MM/dd/yyyy", + textAlign: "Center", + }, + { + field: "inspectionStatus", + headerText: "Inspection Status", + width: 180, + textAlign: "Center", + }, + { + field: "punchListStatus", + headerText: "Punch List Status", + width: 180, + textAlign: "Center", + }, + ], + materialsColumns: [ + { + field: "materialUsed", + headerText: "Materials Used", + width: 180, + textAlign: "Center", + }, + { + field: "materialCost", + headerText: "Material Cost", + width: 140, + format: "C2", + textAlign: "Right", + enableColumnSpan: false, + }, + ], + budgetColumns: [ + { + field: "totalBudget", + headerText: "Planned Budget", + width: 140, + format: "C2", + textAlign: "Center", + enableColumnSpan: false, + }, + { + field: "paidToDate", + headerText: "Actual Spend", + width: 140, + format: "C2", + textAlign: "Center", + enableColumnSpan: false, + }, + ], + }; + }, + provide: { + treegrid: [Freeze, Page], + }, +}); diff --git a/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs2/systemjs.config.js b/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs2/systemjs.config.js new file mode 100644 index 000000000..b0f3cc1b3 --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/columns/column-spanning-cs2/systemjs.config.js @@ -0,0 +1,45 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", +vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-dropdowns":"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-grids": "syncfusion:ej2-vue-grids/dist/ej2-vue-grids.umd.min.js", + "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js", + "@syncfusion/ej2-vue-treegrid": "syncfusion:ej2-vue-treegrid/dist/ej2-vue-treegrid.umd.min.js", + "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-vue-charts": "syncfusion:ej2-vue-charts/dist/ej2-vue-charts.umd.min.js" + + } +}); + +System.import('index.js'); \ No newline at end of file diff --git a/ej2-vue/code-snippet/treegrid/row/row-spanning-cs1/app-composition.vue b/ej2-vue/code-snippet/treegrid/row/row-spanning-cs1/app-composition.vue new file mode 100644 index 000000000..0c2358d55 --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/row/row-spanning-cs1/app-composition.vue @@ -0,0 +1,54 @@ + ++ ++ ++ + + + + + + ++ + diff --git a/ej2-vue/code-snippet/treegrid/row/row-spanning-cs1/app.vue b/ej2-vue/code-snippet/treegrid/row/row-spanning-cs1/app.vue new file mode 100644 index 000000000..585e05e53 --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/row/row-spanning-cs1/app.vue @@ -0,0 +1,70 @@ + ++ ++ ++ + + + + + + + + + ++ + diff --git a/ej2-vue/code-snippet/treegrid/row/row-spanning-cs1/datasource.js b/ej2-vue/code-snippet/treegrid/row/row-spanning-cs1/datasource.js new file mode 100644 index 000000000..8111a0c3f --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/row/row-spanning-cs1/datasource.js @@ -0,0 +1,221 @@ +define(["require", "exports"], function (require, exports) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.rowSpanData = [ + { + 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-vue/code-snippet/treegrid/row/row-spanning-cs1/index.html b/ej2-vue/code-snippet/treegrid/row/row-spanning-cs1/index.html new file mode 100644 index 000000000..303d777bf --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/row/row-spanning-cs1/index.html @@ -0,0 +1,23 @@ + + + + + + ++ ++ ++ + + + + + + + + + EJ2 Vue Sample + + + + + + + + + + + +Loading....+ + + + diff --git a/ej2-vue/code-snippet/treegrid/row/row-spanning-cs1/index.js b/ej2-vue/code-snippet/treegrid/row/row-spanning-cs1/index.js new file mode 100644 index 000000000..ee0e1fa63 --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/row/row-spanning-cs1/index.js @@ -0,0 +1,64 @@ +import Vue from "vue"; +import { TreeGridPlugin } from "@syncfusion/ej2-vue-treegrid"; +import { rowSpanData } from "./datasource.js"; + +Vue.use(TreeGridPlugin); + +new Vue({ + el: "#app", + template: ` +++`, + + data() { + return { + data: rowSpanData, + }; + }, + + methods: { + queryCellInfoEvent: function (args) { + let data = args.data; + switch (data.EmployeeID) { + case 10001: + if (args.column.field === "1:00") { + args.rowSpan = 10; + } + break; + } + }, + }, +}); diff --git a/ej2-vue/code-snippet/treegrid/row/row-spanning-cs1/systemjs.config.js b/ej2-vue/code-snippet/treegrid/row/row-spanning-cs1/systemjs.config.js new file mode 100644 index 000000000..1f71f9bcc --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/row/row-spanning-cs1/systemjs.config.js @@ -0,0 +1,41 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", +vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-dropdowns":"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-grids": "syncfusion:ej2-vue-grids/dist/ej2-vue-grids.umd.min.js", + "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js", + "@syncfusion/ej2-vue-treegrid": "syncfusion:ej2-vue-treegrid/dist/ej2-vue-treegrid.umd.min.js" + } +}); + +System.import('index.js'); \ No newline at end of file diff --git a/ej2-vue/code-snippet/treegrid/row/row-spanning-cs2/app-composition.vue b/ej2-vue/code-snippet/treegrid/row/row-spanning-cs2/app-composition.vue new file mode 100644 index 000000000..49661cab7 --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/row/row-spanning-cs2/app-composition.vue @@ -0,0 +1,96 @@ + ++ ++ ++ + + + + + + + + + ++ + diff --git a/ej2-vue/code-snippet/treegrid/row/row-spanning-cs2/app.vue b/ej2-vue/code-snippet/treegrid/row/row-spanning-cs2/app.vue new file mode 100644 index 000000000..6ceaad8d7 --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/row/row-spanning-cs2/app.vue @@ -0,0 +1,70 @@ + ++ ++ ++ + + + + + + ++ + \ No newline at end of file diff --git a/ej2-vue/code-snippet/treegrid/row/row-spanning-cs2/datasource.js b/ej2-vue/code-snippet/treegrid/row/row-spanning-cs2/datasource.js new file mode 100644 index 000000000..784628a46 --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/row/row-spanning-cs2/datasource.js @@ -0,0 +1,794 @@ +define(["require", "exports"], function (require, exports) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.rowSpanData = [ + { + 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-vue/code-snippet/treegrid/row/row-spanning-cs2/index.html b/ej2-vue/code-snippet/treegrid/row/row-spanning-cs2/index.html new file mode 100644 index 000000000..303d777bf --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/row/row-spanning-cs2/index.html @@ -0,0 +1,23 @@ + + + + + + ++ ++ ++ + + + + + + EJ2 Vue Sample + + + + + + + + + + + +Loading....+ + + + diff --git a/ej2-vue/code-snippet/treegrid/row/row-spanning-cs2/index.js b/ej2-vue/code-snippet/treegrid/row/row-spanning-cs2/index.js new file mode 100644 index 000000000..32efbafb5 --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/row/row-spanning-cs2/index.js @@ -0,0 +1,132 @@ +import Vue from "vue"; +import { TreeGridPlugin, Page, Freeze } from "@syncfusion/ej2-vue-treegrid"; +import { columnSpanData } from "./datasource.js"; + +Vue.use(TreeGridPlugin, Page, Freeze); + +new Vue({ + el: "#app", + template: ` +++ `, + + data() { + return { + data: columnSpanData, + pageSettings: { pageSizeMode: "All", pageSize: 18 }, + scheduleColumns: [ + { + field: "startDate", + headerText: "Start Date", + type: "date", + format: "MM/dd/yyyy", + width: 140, + textAlign: "Center", + }, + { + field: "endDate", + headerText: "End Date", + type: "date", + format: "MM/dd/yyyy", + width: 140, + textAlign: "Center", + }, + ], + personnelColumns: [ + { + field: "supervisor", + headerText: "Supervisor", + width: 180, + }, + { field: "team", headerText: "Crew", width: 200 }, + ], + statusColumns: [ + { + field: "status", + headerText: "Status", + width: 180, + textAlign: "Center", + }, + ], + complianceColumns: [ + { + field: "permitStatus", + headerText: "Permit Status", + width: 160, + textAlign: "Center", + }, + { + field: "inspectionDate", + headerText: "Inspection Date", + width: 180, + type: "date", + format: "MM/dd/yyyy", + textAlign: "Center", + }, + { + field: "inspectionStatus", + headerText: "Inspection Status", + width: 180, + textAlign: "Center", + }, + { + field: "punchListStatus", + headerText: "Punch List Status", + width: 180, + textAlign: "Center", + }, + ], + materialsColumns: [ + { + field: "materialUsed", + headerText: "Materials Used", + width: 180, + textAlign: "Center", + }, + { + field: "materialCost", + headerText: "Material Cost", + width: 140, + format: "C2", + textAlign: "Right", + enableRowSpan: false, + }, + ], + budgetColumns: [ + { + field: "totalBudget", + headerText: "Planned Budget", + width: 140, + format: "C2", + textAlign: "Center", + enableRowSpan: false, + }, + { + field: "paidToDate", + headerText: "Actual Spend", + width: 140, + format: "C2", + textAlign: "Center", + enableRowSpan: false, + }, + ], + }; + }, + provide: { + treegrid: [Freeze, Page], + }, +}); diff --git a/ej2-vue/code-snippet/treegrid/row/row-spanning-cs2/systemjs.config.js b/ej2-vue/code-snippet/treegrid/row/row-spanning-cs2/systemjs.config.js new file mode 100644 index 000000000..1f71f9bcc --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/row/row-spanning-cs2/systemjs.config.js @@ -0,0 +1,41 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", +vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-dropdowns":"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-grids": "syncfusion:ej2-vue-grids/dist/ej2-vue-grids.umd.min.js", + "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js", + "@syncfusion/ej2-vue-treegrid": "syncfusion:ej2-vue-treegrid/dist/ej2-vue-treegrid.umd.min.js" + } +}); + +System.import('index.js'); \ No newline at end of file diff --git a/ej2-vue/code-snippet/treegrid/selection/default-cs7/app-composition.vue b/ej2-vue/code-snippet/treegrid/selection/default-cs7/app-composition.vue new file mode 100644 index 000000000..36d9f6fc9 --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/selection/default-cs7/app-composition.vue @@ -0,0 +1,32 @@ + ++ ++ ++ + + + + + + ++ + \ No newline at end of file diff --git a/ej2-vue/code-snippet/treegrid/selection/default-cs7/app.vue b/ej2-vue/code-snippet/treegrid/selection/default-cs7/app.vue new file mode 100644 index 000000000..676d79fc9 --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/selection/default-cs7/app.vue @@ -0,0 +1,47 @@ + ++ ++ ++ + + + + + + + ++ + \ No newline at end of file diff --git a/ej2-vue/code-snippet/treegrid/selection/default-cs7/datasource.js b/ej2-vue/code-snippet/treegrid/selection/default-cs7/datasource.js new file mode 100644 index 000000000..95392c99e --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/selection/default-cs7/datasource.js @@ -0,0 +1,81 @@ +define(["require", "exports"], function (require, exports) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + var NUM_ROOTS = 60; + var CHILDREN_PER_ROOT = 8; + var TOTAL_RECORDS = NUM_ROOTS + NUM_ROOTS * CHILDREN_PER_ROOT; + console.log(`Generating ${TOTAL_RECORDS} records (last 2 years)`); + var employees = [ + 'Nancy Davolio', 'Andrew Fuller', 'Janet Leverling', 'Margaret Peacock', 'Steven Buchanan', + 'Michael Suyama', 'Robert King', 'Anne Dodsworth', 'John Heart', 'Robert Reagan', + 'Wally Hobbs', 'Arnie Schwartz', 'Stu Pizaro', 'Sandra Johnson', 'Karen Goodson', + 'Hannah Brookly', 'Ed Holmes', 'Victor Norris', 'Maggie Boxter', 'Samantha Bright', + 'Robin Cosworth', 'Samantha Piper', 'Clark Morgan', 'Brad Farkus', 'Taylor Riley', + 'Brett Wade', 'Cynthia Stanwick', 'Greta Sims', 'Olivia Peyton' + ]; + var priorities = ['Low', 'Normal', 'High', 'Urgent']; + var progressStates = ['Not Started', 'In Progress', 'Completed']; + var rootTasks = [ + 'Planning Phase', 'Design Sprint', 'Development Cycle', 'Testing & QA', 'Deployment Rollout', + 'Marketing Campaign', 'Sales Pipeline', 'Customer Support', 'Content Strategy', 'Product Launch', + 'Budget Review', 'Team Training', 'Compliance Audit', 'Vendor Negotiation', 'Performance Review', + 'Infrastructure Upgrade', 'Security Assessment', 'User Feedback Analysis', 'Analytics Dashboard', + 'API Integration', 'Mobile App Update', 'Backend Optimization', 'Frontend Redesign', + 'Database Migration', 'Cloud Migration', 'DevOps Pipeline', 'Quality Assurance', 'Documentation Update', + 'Training Materials', 'Onboarding Process', 'Offboarding Process', 'HR Policy Review', + 'Finance Reporting', 'Legal Compliance', 'Risk Management', 'Crisis Response Plan', + 'Innovation Workshop', 'R&D Project', 'Prototype Development', 'Market Research', + 'Competitor Analysis', 'SWOT Analysis', 'Strategic Planning', 'Goal Setting', 'KPI Definition', + 'Quarterly Review', 'Annual Audit', 'Succession Planning', 'Talent Acquisition' + ]; + var childTasks = [ + 'Define Scope', 'Gather Requirements', 'Wireframe Design', 'Code Implementation', 'Unit Testing', + 'Integration Testing', 'Bug Fixes', 'User Acceptance', 'Deploy to Staging', 'Go-Live Prep', + 'Post-Launch Review', 'Metrics Analysis', 'Stakeholder Meeting', 'Resource Allocation', + 'Risk Assessment', 'Budget Approval', 'Timeline Update', 'Progress Report', 'Feedback Collection', + 'Revision Cycle', 'Final Approval', 'Documentation', 'Training Session', 'Handover Meeting' + ]; + var START_DATE = new Date('2023-11-10T00:00:00'); + var END_DATE = new Date('2025-11-10T00:00:00'); + function randomDate(start, end) { + var d = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); + return d.toISOString().split('T')[0]; + } + exports.taskData = []; + let id = 1; + for (let i = 0; i < NUM_ROOTS; i++) { + var start = randomDate(START_DATE, END_DATE); + var due = randomDate(new Date(start), END_DATE); + var state = progressStates[Math.floor(Math.random() * progressStates.length)]; + taskData.push({ + TaskID: id, + ParentID: null, + Task: rootTasks[i % rootTasks.length] + (i >= rootTasks.length ? ` ${i + 1}` : ''), + AssignedTo: employees[Math.floor(Math.random() * employees.length)], + StartDate: start, + DueDate: due, + Priority: priorities[Math.floor(Math.random() * priorities.length)], + Progress: state, + Status: state === 'Completed' ? 100 : (state === 'In Progress' ? 50 : 0) + }); + var rootId = id; + id++; + for (let c = 0; c < CHILDREN_PER_ROOT; c++) { + var cStart = randomDate(new Date(start), new Date(due)); + var cDue = randomDate(new Date(cStart), new Date(due)); + var cState = progressStates[Math.floor(Math.random() * progressStates.length)]; + taskData.push({ + TaskID: id, + ParentID: rootId, + Task: childTasks[c % childTasks.length] + (c >= childTasks.length ? ` ${c + 1}` : ''), + AssignedTo: employees[Math.floor(Math.random() * employees.length)], + StartDate: cStart, + DueDate: cDue, + Priority: priorities[Math.floor(Math.random() * priorities.length)], + Progress: cState, + Status: cState === 'Completed' ? 100 : (cState === 'In Progress' ? 50 : 0) + }); + id++; + } + } +}); diff --git a/ej2-vue/code-snippet/treegrid/selection/default-cs7/index.html b/ej2-vue/code-snippet/treegrid/selection/default-cs7/index.html new file mode 100644 index 000000000..303d777bf --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/selection/default-cs7/index.html @@ -0,0 +1,23 @@ + + + + + + ++ ++ ++ + + + + + + + EJ2 Vue Sample + + + + + + + + + + + +Loading....+ + + + diff --git a/ej2-vue/code-snippet/treegrid/selection/default-cs7/index.js b/ej2-vue/code-snippet/treegrid/selection/default-cs7/index.js new file mode 100644 index 000000000..28a9b5de4 --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/selection/default-cs7/index.js @@ -0,0 +1,34 @@ + +import Vue from "vue"; +import { TreeGridPlugin, Page } from "@syncfusion/ej2-vue-treegrid"; +import { sampleData } from "./datasource.js"; + +Vue.use(TreeGridPlugin); + + +new Vue({ + el: '#app', + template: ` +++`, + + data () { + return { + data: sampleData, + selectionOptions: { mode: 'Both' } + }; + }, + provide: { + treegrid: [ Page ] + }, + +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/treegrid/selection/default-cs7/systemjs.config.js b/ej2-vue/code-snippet/treegrid/selection/default-cs7/systemjs.config.js new file mode 100644 index 000000000..d261eaad9 --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/selection/default-cs7/systemjs.config.js @@ -0,0 +1,42 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", +vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-dropdowns":"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-grids": "syncfusion:ej2-vue-grids/dist/ej2-vue-grids.umd.min.js", + "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js", + "@syncfusion/ej2-vue-treegrid": "syncfusion:ej2-vue-treegrid/dist/ej2-vue-treegrid.umd.min.js", + "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js", + } +}); + +System.import('index.js'); \ No newline at end of file diff --git a/ej2-vue/code-snippet/treegrid/selection/default-cs8/app-composition.vue b/ej2-vue/code-snippet/treegrid/selection/default-cs8/app-composition.vue new file mode 100644 index 000000000..76083754e --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/selection/default-cs8/app-composition.vue @@ -0,0 +1,94 @@ + ++ ++ ++ + + + ++ + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/treegrid/selection/default-cs8/app.vue b/ej2-vue/code-snippet/treegrid/selection/default-cs8/app.vue new file mode 100644 index 000000000..3ee1ab95e --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/selection/default-cs8/app.vue @@ -0,0 +1,78 @@ + ++ ++ ++ + + + + + + + ++ ++ ++ ++ + + + + diff --git a/ej2-vue/code-snippet/treegrid/selection/default-cs8/datasource.js b/ej2-vue/code-snippet/treegrid/selection/default-cs8/datasource.js new file mode 100644 index 000000000..f1439f89a --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/selection/default-cs8/datasource.js @@ -0,0 +1,146 @@ + +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +var id = 1; +exports.data = function generateGroceriesData() { + var categories = [ + { + name: "Fruits", + items: [ + { name: "Red Apple", desc: "Crisp and juicy, perfect for snacking" }, + { name: "Ripe Banana", desc: "Naturally sweet and creamy" }, + { name: "Valencia Orange", desc: "Sweet and seedless citrus favorite" }, + { name: "Alphonso Mango", desc: "King of mangoes, rich and aromatic" }, + { name: "Green Grapes", desc: "Crunchy, sweet and seedless" }, + { name: "Fresh Strawberry", desc: "Bright red, juicy and fragrant" }, + { name: "Golden Pineapple", desc: "Sweet and tangy tropical delight" }, + { name: "Dragon Fruit", desc: "Mildly sweet with striking appearance" }, + { name: "Kiwi Gold", desc: "Sweet and tropical with golden flesh" }, + { name: "Hass Avocado", desc: "Creamy texture, rich in healthy fats" }, + { name: "Pomegranate", desc: "Juicy ruby seeds packed with antioxidants" }, + { name: "Seedless Watermelon", desc: "Refreshing and perfectly sweet" }, + { name: "Blueberry", desc: "Small but bursting with flavor" }, + { name: "Thai Guava", desc: "Crisp, sweet and slightly floral" }, + { name: "Sweet Lime", desc: "Milder and sweeter than regular lime" } + ], + qty: [8, 45] + }, + { + name: "Vegetables", + items: [ + { name: "Fresh Carrot", desc: "Crunchy and naturally sweet" }, + { name: "Baby Potato", desc: "Tender skin, perfect for roasting" }, + { name: "Roma Tomato", desc: "Firm and ideal for cooking" }, + { name: "Red Onion", desc: "Mild flavor, great raw or cooked" }, + { name: "Broccoli Crown", desc: "Fresh, vibrant and nutrient-rich" }, + { name: "Baby Spinach", desc: "Tender leaves, ready to eat" }, + { name: "Bell Pepper Mix", desc: "Colorful trio of red, yellow and green" }, + { name: "Cauliflower", desc: "Fresh, firm and versatile" }, + { name: "Green Beans", desc: "Crisp and tender French beans" }, + { name: "Cucumber", desc: "Cool, refreshing and hydrating" } + ], + qty: [10, 50] + }, + { + name: "Dairy", + items: [ + { name: "Full Cream Milk", desc: "Rich and creamy pasteurized milk" }, + { name: "Cheddar Cheese", desc: "Sharp and smooth aged cheddar" }, + { name: "Salted Butter", desc: "Perfectly salted, spreads easily" }, + { name: "Greek Yogurt", desc: "Thick, creamy and high in protein" }, + { name: "Fresh Paneer", desc: "Soft, fresh and homemade style" }, + { name: "Curd", desc: "Probiotic-rich homemade curd" }, + { name: "Mozzarella", desc: "Soft, milky and great for melting" }, + { name: "Cream Cheese", desc: "Smooth and tangy spread" } + ], + qty: [5, 20] + }, + { + name: "Bakery", + items: [ + { name: "Whole Wheat Bread", desc: "Freshly baked, soft and healthy" }, + { name: "Garlic Croissant", desc: "Buttery with aromatic garlic" }, + { name: "Blueberry Muffin", desc: "Moist and packed with real berries" }, + { name: "Chocolate Donut", desc: "Soft ring donut with chocolate glaze" }, + { name: "Burger Bun", desc: "Soft, sesame-topped classic" }, + { name: "Pav Bread", desc: "Soft and fluffy Mumbai-style pav" } + ], + qty: [4, 18] + }, + { + name: "Meat & Seafood", + items: [ + { name: "Chicken Breast", desc: "Boneless, skinless and lean cut" }, + { name: "Salmon Fillet", desc: "Rich in omega-3, fresh Atlantic" }, + { name: "Ground Beef", desc: "Lean mince, perfect for burgers" }, + { name: "Fresh Prawns", desc: "Medium size, cleaned and deveined" }, + { name: "Lamb Chops", desc: "Tender and flavorful premium cut" } + ], + qty: [2, 12] + }, + { + name: "Beverages", + items: [ + { name: "Orange Juice", desc: "100% pure, not from concentrate" }, + { name: "Coca-Cola", desc: "Classic original taste" }, + { name: "Sparkling Water", desc: "Lightly bubbled, zero calories" }, + { name: "Almond Milk", desc: "Unsweetened plant-based milk" }, + { name: "Green Tea", desc: "Antioxidant-rich classic brew" } + ], + qty: [15, 80] + }, + { + name: "Snacks", + items: [ + { name: "Classic Potato Chips", desc: "Thin, crispy and lightly salted" }, + { name: "Roasted Almonds", desc: "Lightly salted premium nuts" }, + { name: "Dark Chocolate", desc: "70% cocoa, rich and smooth" }, + { name: "Oreo Cookies", desc: "Classic cream-filled sandwich" }, + { name: "Butter Popcorn", desc: "Movie-style buttery goodness" } + ], + qty: [20, 70] + }, + { + name: "Frozen", + items: [ + { name: "French Fries", desc: "Crispy golden classic fries" }, + { name: "Mixed Vegetables", desc: "Carrot, peas, corn and beans" }, + { name: "Vanilla Ice Cream", desc: "Creamy and rich classic flavor" }, + { name: "Aloo Paratha", desc: "Ready-to-cook stuffed flatbread" }, + { name: "Green Peas", desc: "Sweet and tender frozen peas" } + ], + qty: [8, 35] + }, + { + name: "Household", + items: [ + { name: "Toilet Paper", desc: "Soft, strong 3-ply rolls" }, + { name: "Dishwash Liquid", desc: "Lemon fresh, cuts grease fast" }, + { name: "Laundry Detergent", desc: "Top-load formula with fresh scent" }, + { name: "Garbage Bags", desc: "Large, tear-resistant black bags" }, + { name: "Floor Cleaner", desc: "Lavender fragrance, streak-free" } + ], + qty: [6, 25] + } + ]; + return categories.map(function (cat) { return ({ + id: id++, + name: cat.name, + expanded: false, + items: cat.items.map(function (item) { + var _a = cat.qty, min = _a[0], max = _a[1]; + var quantity = Math.floor(Math.random() * (max - min + 1)) + min; + return { + id: id++, + name: item.name, + description: item.desc, + quantity: quantity, + price: Number((Math.random() * 12 + 0.99).toFixed(2)), + status: quantity < 20 ? "Low Stock" : quantity > 60 ? "High Stock" : "In Stock", + popularity: ["Best Seller", "Regular", "New"][Math.floor(Math.random() * 3)] + }; + }) + }); }); +} + + diff --git a/ej2-vue/code-snippet/treegrid/selection/default-cs8/index.html b/ej2-vue/code-snippet/treegrid/selection/default-cs8/index.html new file mode 100644 index 000000000..303d777bf --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/selection/default-cs8/index.html @@ -0,0 +1,23 @@ + + + + + + ++ ++ ++ + + + + + + ++ ++ ++ EJ2 Vue Sample + + + + + + + + + + + +Loading....+ + + + diff --git a/ej2-vue/code-snippet/treegrid/selection/default-cs8/index.js b/ej2-vue/code-snippet/treegrid/selection/default-cs8/index.js new file mode 100644 index 000000000..cbd864af7 --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/selection/default-cs8/index.js @@ -0,0 +1,65 @@ + +import Vue from "vue"; +import { TreeGridPlugin, VirtualScroll, Aggregate } from "@syncfusion/ej2-vue-treegrid"; +import { data } from "./datasource.js"; + +Vue.use(TreeGridPlugin); + + +new Vue({ + el: '#app', + template: ` +++`, + + data () { + return { + data: data(), + footerTemp: function () { + return { template : createApp({}).component('footerTemplate', { + template: `Total Price of Selected Rows: $0.00`, + data () {return { data: {}};} + }) + } + }, + }; + }, + provide: { + treegrid: [VirtualScroll, Aggregate] + }, + methods: { + updateFooterTotal() { + const treegrid = this.$refs.treegrid.ej2Instances; + const checkedRecords = treegrid.getCheckedRecords(); + const totalPrice = checkedRecords.reduce( + (sum, rec) => sum + (parseFloat(rec.price) || 0), + 0 + ); + const footerEl = treegrid.getFooterContent().querySelector(".selected-total"); + if (footerEl) { + footerEl.innerHTML = `Total Price of Selected Rows: $${totalPrice.toFixed(2)}`; + } + } +} + +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/treegrid/selection/default-cs8/systemjs.config.js b/ej2-vue/code-snippet/treegrid/selection/default-cs8/systemjs.config.js new file mode 100644 index 000000000..d261eaad9 --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/selection/default-cs8/systemjs.config.js @@ -0,0 +1,42 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", +vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-dropdowns":"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-grids": "syncfusion:ej2-vue-grids/dist/ej2-vue-grids.umd.min.js", + "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js", + "@syncfusion/ej2-vue-treegrid": "syncfusion:ej2-vue-treegrid/dist/ej2-vue-treegrid.umd.min.js", + "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js", + } +}); + +System.import('index.js'); \ No newline at end of file diff --git a/ej2-vue/code-snippet/treeview/node-style-cs1/app-composition.vue b/ej2-vue/code-snippet/treeview/node-style-cs1/app-composition.vue new file mode 100644 index 000000000..c2a594599 --- /dev/null +++ b/ej2-vue/code-snippet/treeview/node-style-cs1/app-composition.vue @@ -0,0 +1,48 @@ + ++ ++ ++ + + + + + + ++ ++ ++ + + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/treeview/node-style-cs1/app.vue b/ej2-vue/code-snippet/treeview/node-style-cs1/app.vue new file mode 100644 index 000000000..7515b3d7d --- /dev/null +++ b/ej2-vue/code-snippet/treeview/node-style-cs1/app.vue @@ -0,0 +1,66 @@ + + ++ + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/treeview/node-style-cs1/index.css b/ej2-vue/code-snippet/treeview/node-style-cs1/index.css new file mode 100644 index 000000000..d6e265c7c --- /dev/null +++ b/ej2-vue/code-snippet/treeview/node-style-cs1/index.css @@ -0,0 +1,14 @@ +.control_wrapper { + display: block; + max-width: 350px; + max-height: 350px; + margin: auto; + overflow: auto; + border: 1px solid #dddddd; + border-radius: 3px; +} + +.child-node { + font-weight: bold; + background-color: aqua; +} \ No newline at end of file diff --git a/ej2-vue/code-snippet/treeview/node-style-cs1/index.html b/ej2-vue/code-snippet/treeview/node-style-cs1/index.html new file mode 100644 index 000000000..303d777bf --- /dev/null +++ b/ej2-vue/code-snippet/treeview/node-style-cs1/index.html @@ -0,0 +1,23 @@ + + + + + + ++ EJ2 Vue Sample + + + + + + + + + + + +Loading....+ + + + diff --git a/ej2-vue/code-snippet/treeview/node-style-cs1/index.js b/ej2-vue/code-snippet/treeview/node-style-cs1/index.js new file mode 100644 index 000000000..b21b937a3 --- /dev/null +++ b/ej2-vue/code-snippet/treeview/node-style-cs1/index.js @@ -0,0 +1,49 @@ + +import Vue from 'vue'; +import { TreeViewPlugin } from "@syncfusion/ej2-vue-navigations"; + +Vue.use(TreeViewPlugin); + +new Vue({ + el: '#app', + template: ` +++`, + + data () { + var dataSource = [ + { + nodeId: '01', nodeText: 'Music', + htmlAttributes: { class: 'child-node' }, + nodeChild: [ + { nodeId: '01-01', nodeText: 'Gouttes.mp3' } + ] + }, + { + nodeId: '02', nodeText: 'Videos', expanded: true, + nodeChild: [ + { nodeId: '02-01', nodeText: 'Naturals.mp4' }, + { nodeId: '02-02', nodeText: 'Wild.mpeg' }, + ] + }, + { + nodeId: '03', nodeText: 'Documents', + nodeChild: [ + { nodeId: '03-01', nodeText: 'Environment Pollution.docx' }, + { nodeId: '03-02', nodeText: 'Global Water, Sanitation, & Hygiene.docx' }, + { nodeId: '03-03', nodeText: 'Global Warming.ppt' }, + { nodeId: '03-04', nodeText: 'Social Network.pdf' }, + { nodeId: '03-05', nodeText: 'Youth Empowerment.pdf' }, + ] + }, + ]; + return { + fields: { dataSource: dataSource, id: 'nodeId', text: 'nodeText', child: 'nodeChild', htmlAttributes: "htmlAttributes" }, + } + }, + +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/treeview/node-style-cs1/systemjs.config.js b/ej2-vue/code-snippet/treeview/node-style-cs1/systemjs.config.js new file mode 100644 index 000000000..dc14102c1 --- /dev/null +++ b/ej2-vue/code-snippet/treeview/node-style-cs1/systemjs.config.js @@ -0,0 +1,36 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", +vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-data": "syncfusion:ej2-vue-data/dist/ej2-vue-data.umd.min.js", + "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js", + "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js", + "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js", + "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js", + "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js", + } +}); + +System.import('index.js'); \ No newline at end of file diff --git a/ej2-vue/grid/aggregates/group-and-caption-aggregate.md b/ej2-vue/grid/aggregates/group-and-caption-aggregate.md index 6e3598e1c..d1290791d 100644 --- a/ej2-vue/grid/aggregates/group-and-caption-aggregate.md +++ b/ej2-vue/grid/aggregates/group-and-caption-aggregate.md @@ -10,10 +10,10 @@ domainurl: ##DomainURL## # Group and caption aggregate in Vue Grid component -Group footer and caption aggregates in the Syncfusion® Vue 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/vue/documentation/api/grid/aggregateColumnDirective/#groupfootertemplate) and [groupCaptionTemplate](https://ej2.syncfusion.com/vue/documentation/api/grid/aggregateColumnDirective/#groupcaptiontemplate) properties of the [AggregateColumnDirective](https://ej2.syncfusion.com/vue/documentation/api/grid/aggregateColumnDirective). +Group footer and caption aggregates in the Syncfusion® Vue 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/vue/documentation/api/grid/aggregateColumnDirective#groupfootertemplate) and [groupCaptionTemplate](https://ej2.syncfusion.com/vue/documentation/api/grid/aggregateColumnDirective#groupcaptiontemplate) properties of the [AggregateColumnDirective](https://ej2.syncfusion.com/vue/documentation/api/grid/aggregateColumnDirective). -> When working with group aggregates in Syncfusion® Grid, it is important to set the property [allowGrouping](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#allowgrouping) of the [column](https://ej2.syncfusion.com/vue/documentation/api/grid/column) to **true**. -> To maintain grouped columns in the grid after grouping, set [showGroupedColumn](https://ej2.syncfusion.com/vue/documentation/api/grid/groupSettings/#showgroupedcolumn) to **true**. +> When working with group aggregates in Syncfusion® Grid, it is important to set the property [allowGrouping](https://ej2.syncfusion.com/vue/documentation/api/grid/column#allowgrouping) of the [column](https://ej2.syncfusion.com/vue/documentation/api/grid/column) to **true**. +> To maintain grouped columns in the grid after grouping, set [showGroupedColumn](https://ej2.syncfusion.com/vue/documentation/api/grid/groupSettings#showgroupedcolumn) to **true**. ## Group footer aggregates @@ -145,11 +145,11 @@ components: { {% previewsample "page.domainurl/code-snippet/grid/aggregates/default-cs5" %} -> * The aggregate values must be accessed inside the template using their corresponding [type](https://ej2.syncfusion.com/vue/documentation/api/grid/aggregateColumnDirective/#type) name. +> * The aggregate values must be accessed inside the template using their corresponding [type](https://ej2.syncfusion.com/vue/documentation/api/grid/aggregateColumnDirective#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/vue/documentation/api/grid/aggregateColumnDirective/#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/vue/documentation/api/grid/aggregateColumnDirective#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® Vue Grid component: @@ -278,11 +278,11 @@ components: { {% previewsample "page.domainurl/code-snippet/grid/aggregates/default-cs12" %} > 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://ej2.syncfusion.com/vue/documentation/api/grid/groupSettings/#disablepagewiseaggregates) property. +> If you require aggregates for all the data in the grid, you can enable the [disablePageWiseAggregates](https://ej2.syncfusion.com/vue/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® Vue 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://ej2.syncfusion.com/vue/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® Vue 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://ej2.syncfusion.com/vue/documentation/api/grid/groupSettings#disablepagewiseaggregates) property to **true**. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -431,4 +431,4 @@ components: { ## See also -* [How to format aggregate value in Vue grid](footer-aggregate.md#format-the-aggregate-value) \ No newline at end of file +* [How to format aggregate value in Vue grid](footer-aggregate#format-the-aggregate-value) \ No newline at end of file diff --git a/ej2-vue/grid/connecting-to-adaptors/url-adaptor.md b/ej2-vue/grid/connecting-to-adaptors/url-adaptor.md index e44f2a40d..23aa4a539 100644 --- a/ej2-vue/grid/connecting-to-adaptors/url-adaptor.md +++ b/ej2-vue/grid/connecting-to-adaptors/url-adaptor.md @@ -9,7 +9,7 @@ documentation: ug domainurl: ##DomainURL## --- -# UrlAdaptor in Syncfusion® Vue Grid Component +# UrlAdaptor in Syncfusion Vue Grid Component The UrlAdaptor serves as the base adaptor for facilitating communication between remote data services and an UI component. It enables seamless data binding and interaction with custom API services or any remote service through URLs. The UrlAdaptor is particularly useful for the scenarios where a custom API service with unique logic for handling data and CRUD operations is in place. This approach allows for custom handling of data and CRUD operations, and the resultant data returned in the `result` and `count` format for display in the Syncfusion® Vue Grid component. @@ -789,7 +789,7 @@ public object Post([FromBody] DataManagerRequest DataManagerRequest) The Syncfusion® Vue Grid Component seamlessly integrates CRUD (Create, Read, Update, Delete) operations with server-side controller actions through specific properties: [insertUrl](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DataManager.html#Syncfusion_EJ2_DataManager_InsertUrl), [removeUrl](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DataManager.html#Syncfusion_EJ2_DataManager_RemoveUrl), [updateUrl](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DataManager.html#Syncfusion_EJ2_DataManager_UpdateUrl), [crudUrl](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DataManager.html#Syncfusion_EJ2_DataManager_CrudUrl), and [batchUrl](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DataManager.html#Syncfusion_EJ2_DataManager_BatchUrl). These properties enable the grid to communicate with the data service for every grid action, facilitating server-side operations. -**CRUD Operations Mapping** +**CRUD Operations Mapping:** CRUD operations within the grid can be mapped to server-side controller actions using specific properties: @@ -799,7 +799,7 @@ CRUD operations within the grid can be mapped to server-side controller actions 4. **crudUrl**: Specifies a single URL for all CRUD operations. 5. **batchUrl**: Specifies the URL for batch editing. -To enable editing in Vue Grid component, refer to the editing [documentation](https://ej2.syncfusion.com/vue/documentation/grid/editing/edit). In the below example, the inline edit [mode](https://ej2.syncfusion.com/vue/documentation/api/grid/editSettings/#mode) is enabled and [toolbar](https://helpej2.syncfusion.com/vue/documentation/api/grid/#toolbar) property is configured to display toolbar items for editing purposes. +To enable editing in Vue Grid component, refer to the editing [documentation](https://ej2.syncfusion.com/vue/documentation/grid/editing/edit). In the below example, the inline edit [mode](https://ej2.syncfusion.com/vue/documentation/api/grid/editSettings#mode) is enabled and [toolbar](https://helpej2.syncfusion.com/vue/documentation/api/grid#toolbar) property is configured to display toolbar items for editing purposes. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -901,7 +901,7 @@ To enable editing in Vue Grid component, refer to the editing [documentation](ht {% endtabs %} -> Normal/Inline editing is the default edit [mode](https://ej2.syncfusion.com/vue/documentation/api/grid/editSettings/#mode) for the Grid component. To enable CRUD operations, ensure that the [isPrimaryKey](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#isprimarykey) property is set to **true** for a specific Grid column, ensuring that its value is unique. +> Normal/Inline editing is the default edit [mode](https://ej2.syncfusion.com/vue/documentation/api/grid/editSettings#mode) for the Grid component. To enable CRUD operations, ensure that the [isPrimaryKey](https://ej2.syncfusion.com/vue/documentation/api/grid/column#isprimarykey) property is set to **true** for a specific Grid column, ensuring that its value is unique. The below class is used to structure data sent during CRUD operations. @@ -977,7 +977,7 @@ public void Update([FromBody] CRUDModel+++ updatedRecord) } ``` -**Delete operation** +**Delete operation:** To delete existing records, use the [removeUrl](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DataManager.html#Syncfusion_EJ2_DataManager_RemoveUrl) property to specify the controller action mapping URL for the delete operation. The primary key value of the deleted record is bound to the **deletedRecord** parameter. @@ -1007,7 +1007,7 @@ public void Remove([FromBody] CRUDModel deletedRecord) > You can find the complete sample for the UrlAdaptor in [GitHub](https://github.com/SyncfusionExamples/Binding-data-from-remote-service-to-vue-data-grid) link. -**Single method for performing all CRUD operations** +**Single method for performing all CRUD operations:** Using the `crudUrl` property, the controller action mapping URL can be specified to perform all the CRUD operation at server-side using a single method instead of specifying separate controller action method for CRUD (insert, update and delete) operations. @@ -1137,9 +1137,9 @@ public void CrudUpdate([FromBody] CRUDModel request) } ``` -**Batch operation** +**Batch operation:** -To perform batch operation, define the edit [mode](https://ej2.syncfusion.com/vue/documentation/api/grid/editSettings/#mode) as **Batch** and specify the `batchUrl` property in the DataManager. Use the **Add** toolbar button to insert new row in batch editing mode. To edit a cell, double-click the desired cell and update the value as required. To delete a record, simply select the record and press the **Delete** toolbar button. Now, all CRUD operations will be executed in single request. Clicking the **Update** toolbar button will update the newly added, edited, or deleted records from the OrdersDetails table using a single API POST request. +To perform batch operation, define the edit [mode](https://ej2.syncfusion.com/vue/documentation/api/grid/editSettings#mode) as **Batch** and specify the `batchUrl` property in the DataManager. Use the **Add** toolbar button to insert new row in batch editing mode. To edit a cell, double-click the desired cell and update the value as required. To delete a record, simply select the record and press the **Delete** toolbar button. Now, all CRUD operations will be executed in single request. Clicking the **Update** toolbar button will update the newly added, edited, or deleted records from the OrdersDetails table using a single API POST request. {% tabs%} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -1273,4 +1273,253 @@ if (batchOperation.deleted != null) return Json(batchOperation); } ``` - \ No newline at end of file + + +## Foreign key column with UrlAdaptor + +Configuration of foreign key column with remote data using `UrlAdaptor` requires assigning the DataManager instance with the endpoint URL to the particular column dataSource along with foreign key field and foreign key value properties. When both grid and foreign key column uses a `UrlAdaptor`, the grid data and the foreign key data are fetched separately from their respective remote endpoints. During operations such as filtering or sorting, the grid sends requests to the server based on the foreign key field and its corresponding value. + +### Handling Filter operation on foreign key column + +Filter operation on a foreign key column ensures that the displayed value ("CustomerName") is automatically mapped to the underlying foreign key field ("CustomerID"). This ensures the filter request sent to the server uses the value from the foreign key field ("CustomerID"), applying the filter correctly to the main dataset. + + + +```csharp +[HttpPost] +public object Post([FromBody] DataManagerRequest DataManagerRequest) +{ + // Retrieve data from the data source. + IQueryable DataSource = GetOrderData().AsQueryable(); + + QueryableOperation queryableOperation = new QueryableOperation(); // Initialize QueryableOperation instance. + + // Handling filtering operation + if (DataManagerRequest.Where != null && DataManagerRequest.Where.Count > 0) + { + DataSource = operation.PerformFiltering(DataSource, DataManagerRequest.Where, DataManagerRequest.Where[0].Operator); + } + + // Get the total count of records. + int totalRecordsCount = DataSource.Count(); + + // Return data based on the request. + return new { result = DataSource, count = totalRecordsCount }; +``` +### Handling Sort operation on foreign key column + +Sort operation on a foreign key column orders records based on the underlying field ("CustomerID"). The sorting query sent to the server includes the corresponding foreign key value. To sort by the foreign key value, supply the foreign key's data source to the sorted query within the performSorting method. + + + +```csharp +[HttpPost] +public object Post([FromBody] DataManagerRequest DataManagerRequest) +{ + // Retrieve data from the data source (e.g., database). + IQueryable DataSource = GetOrderData().AsQueryable(); + + QueryableOperation queryableOperation = new QueryableOperation(); // Initialize QueryableOperation instance. + + if (DataManagerRequest.Sorted != null && DataManagerRequest.Sorted.Count > 0) //Sorting + { + for (int i = 0; i < DataManagerRequest.Sorted.Count; i++) + { + if (DataManagerRequest.Sorted[i].ForeignKeyValue == "CustomerName") + { + DataManagerRequest.Sorted[i].ForeignKeyDataSource = GetCustomerData().AsQueryable(); + } + } + DataSource = operation.PerformSorting(DataSource, DataManagerRequest.Sorted); + } + // Get the total count of records. + int totalRecordsCount = DataSource.Count(); + + // Return data based on the request. + return new { result = DataSource, count = totalRecordsCount }; +} +``` +> Sort operation for a foreign key column based on its foreign key value mandates including the foreign key DataSource in the sorted query of the DataManager request on the server. If the foreign key DataSource is not passed, the sorting operation will be performed based on the column field. + +### Handling search operation on foreign key column + +Search process in a grid with foreign key columns produces a filter query for each column using the provided search term. For foreign key columns specifically, the grid first queries the associated foreign key data source to retrieve the underlying field value that matches the search term. It then constructs a filter query using that value and the column's field, applying it to the main dataset. + +### Client side configuration for a foreign key column with UrlAdaptor + +The following example demonstrates how to configure a foreign key column using the `UrlAdaptor`. + + +{% tabs%} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} + + + + + + + +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} + ++ ++ + + + + + + + + +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/ej2-vue/grid/hierarchy-grid.md b/ej2-vue/grid/hierarchy-grid.md index d2cca2c13..213924a2c 100644 --- a/ej2-vue/grid/hierarchy-grid.md +++ b/ej2-vue/grid/hierarchy-grid.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## The Hierarchy Grid in an Vue Grid component is typically used when you need to display hierarchical data in a tabular format with expandable and collapsible rows. It allows you to represent parent and child relationships within the grid, making it easier for you to navigate and understand the data. -This feature can be enabled by utilizing the [childGrid](https://ej2.syncfusion.com/vue/documentation/api/grid/#childgrid) and [childGrid.queryString](https://ej2.syncfusion.com/vue/documentation/api/grid/#querystring) properties of the grid component. +This feature can be enabled by utilizing the [childGrid](https://ej2.syncfusion.com/vue/documentation/api/grid#childgrid) and [childGrid.queryString](https://ej2.syncfusion.com/vue/documentation/api/grid#querystring) properties of the grid component. To enable the Hierarchy Grid feature: @@ -36,13 +36,13 @@ The following example demonstrates how to enable the hierarchy feature in the gr {% previewsample "page.domainurl/code-snippet/grid/hierarchy-grid/default-cs2" %} > * Grid supports n level of child grids. -> * Hierarchical binding is not supported when [DetailTemplate](https://ej2.syncfusion.com/vue/documentation/api/grid/#detailtemplate) is enabled. +> * Hierarchical binding is not supported when [DetailTemplate](https://ej2.syncfusion.com/vue/documentation/api/grid#detailtemplate) is enabled. ## Bind hierarchy grid with different field By default, the parent and child grids have the same field name to map and render a hierarchical grid. However, the component supports establishing a parent-child relationship between grids with different field names. This feature is beneficial when you want to create a parent-child relationship between grids but need to use distinct field names for mapping the data. As a result, you can easily establish the desired relationship between the parent and child grids, even with different field names for data mapping. -By default, the parent and child grid relation is maintained using the [queryString](https://ej2.syncfusion.com/vue/documentation/api/grid/#querystring) property, which requires the same field name for both grids. However, to achieve the parent and child relation with different fields, you need to modify the mapping value in the [load](https://ej2.syncfusion.com/vue/documentation/api/grid/#load) event of child grid. +By default, the parent and child grid relation is maintained using the [queryString](https://ej2.syncfusion.com/vue/documentation/api/grid#querystring) property, which requires the same field name for both grids. However, to achieve the parent and child relation with different fields, you need to modify the mapping value in the [load](https://ej2.syncfusion.com/vue/documentation/api/grid#load) event of child grid. In the following example, the `load` event is utilized to customize the mapping value for the child grid. By accessing the `parentDetails` property and its **parentKeyFieldValue**, you can set the desired mapping value. The `parentRowData` property contains the data of the parent row, and by using the **EmployeeID** field name, you can extract the corresponding value from the parent row data. @@ -63,7 +63,7 @@ In the following example, the `load` event is utilized to customize the mapping Expanding the child grid initially in the Syncfusion® Vue Grid component is helpful when you want to display the child rows of the hierarchical grid expanded by default upon grid load. This can be beneficial in scenarios where you want to provide immediate visibility into the hierarchical data without requiring you to manually expand each child row. -To achieve this, you can use the [expand](https://ej2.syncfusion.com/vue/documentation/api/grid/detailRow/#expand) method with the desired target index (number) in the [dataBound](https://ej2.syncfusion.com/vue/documentation/api/grid/#databound) event of the grid. +To achieve this, you can use the [expand](https://ej2.syncfusion.com/vue/documentation/api/grid/detailRow#expand) method with the desired target index (number) in the [dataBound](https://ej2.syncfusion.com/vue/documentation/api/grid#databound) event of the grid. In the provided example, expand the third record of the grid by utilizing the `expand` method within the `dataBound` event. @@ -84,7 +84,7 @@ In the provided example, expand the third record of the grid by utilizing the `e Dynamically load child grid data in Syncfusion® Vue Grid helps improve performance, optimize data transmission, and enhance the your experience by providing on-demand access to relevant information. Additionally, it offers flexibility in data presentation, which helps improve the overall efficiency of your application. -To dynamically load the `dataSource` of a child grid in the Grid, you can utilize the [load](https://ej2.syncfusion.com/vue/documentation/api/grid/#load) event of parent grid. This event allows you to customize the loading behavior of the child grid based on the data of parent grid. +To dynamically load the `dataSource` of a child grid in the Grid, you can utilize the [load](https://ej2.syncfusion.com/vue/documentation/api/grid#load) event of parent grid. This event allows you to customize the loading behavior of the child grid based on the data of parent grid. The following example demonstrates how to dynamically load child grid data using the `load` event. @@ -103,7 +103,7 @@ The following example demonstrates how to dynamically load child grid data using Dynamically binding data to a child grid based on the parent row data in the Syncfusion® Vue Grid component is useful when you want to display child grid data that is specific to each parent row. This feature allows for a dynamic and contextual representation of data within the child grid. -To dynamically bind data to the child grid based on the parent row data instead of using the [queryString](https://ej2.syncfusion.com/vue/documentation/api/grid/#querystring) property, you can utilize the [detailDataBound](https://ej2.syncfusion.com/vue/documentation/api/grid/#detaildatabound) event of the grid. This event is triggered when expanding the child grid. +To dynamically bind data to the child grid based on the parent row data instead of using the [queryString](https://ej2.syncfusion.com/vue/documentation/api/grid#querystring) property, you can utilize the [detailDataBound](https://ej2.syncfusion.com/vue/documentation/api/grid#detaildatabound) event of the grid. This event is triggered when expanding the child grid. In the `detailDataBound` event handler, you can filter the child grid's dataSource based on the **EmployeeID** column value of the parent row data. This can be achieved by using the `DataManager` plugin and applying a filter to the child grid's dataSource. The filtered data can be assigned as the new dataSource for the child grid. This can be demonstrated by the following sample. @@ -122,7 +122,7 @@ In the `detailDataBound` event handler, you can filter the child grid's dataSour Adding a record in a child grid within the Syncfusion® Vue Grid component is useful when you want to provide the ability to add new records to the child grid. This feature allows you to input and save additional data specific to each parent row. -To maintain the parent-child relationship in the Grid when adding a record to the child grid, you need to set the value for the `queryString` in the added data. This can be done using the [actionBegin](https://ej2.syncfusion.com/vue/documentation/api/grid/#actionbegin) event. +To maintain the parent-child relationship in the Grid when adding a record to the child grid, you need to set the value for the `queryString` in the added data. This can be done using the [actionBegin](https://ej2.syncfusion.com/vue/documentation/api/grid#actionbegin) event. In the following example, the parent and child grids are related by the **EmployeeID** field. To add a new record in the child grid, the **EmployeeID** field needs to be set with the value of the parent record's `queryString` in the `actionBegin` event. @@ -141,7 +141,7 @@ In the following example, the parent and child grids are related by the **Employ A template column in a child grid within the Syncfusion® Vue Grid component is valuable when you want to customize the appearance and functionality of specific columns in the child grid. It is useful for incorporating interactive elements, custom formatting, or complex data representation within specific columns of the child grid. -To achieve this, you can utilize the [template](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#template) property of a column to display a custom element instead of a field value in the Grid. +To achieve this, you can utilize the [template](https://ej2.syncfusion.com/vue/documentation/api/grid/column#template) property of a column to display a custom element instead of a field value in the Grid. The following example demonstrates, how to show a custom image in the **Employee Image** column of the child grid by utilizing the `template` property of the column. @@ -160,7 +160,7 @@ The following example demonstrates, how to show a custom image in the **Employee Getting parent details in a child grid in an Vue Grid component is useful when you want to display and utilize information from the parent row within the child grid. This can be beneficial in scenarios where you need to provide additional context or perform calculations based on the parent row's data -To achieve this, you can utilize the [created](https://ej2.syncfusion.com/vue/documentation/api/grid/#created) event. This event is triggered when the child grid is created and can be used to handle the child grid. +To achieve this, you can utilize the [created](https://ej2.syncfusion.com/vue/documentation/api/grid#created) event. This event is triggered when the child grid is created and can be used to handle the child grid. The following example demonstrates how to obtain parent details in a child grid using the `created` event. Within the `created` event, you can access the parent row data using `this.parentDetails.parentRowData` and display the desired details in the message. @@ -198,7 +198,7 @@ The following example demonstrates how to render aggregates in a child grid to d The Hierarchy Grid in the Syncfusion® Vue Grid component allows you to expand all child grid rows using an external button. This feature provides you with a convenient overview of all the hierarchical data within the grid, eliminating the need to manually expand each row individually. -By default, Grid renders all child grid rows in collapsed state. To expand all child grid rows in the Grid using an external button, you can utilize the [expandAll](https://ej2.syncfusion.com/vue/documentation/api/grid/detailRow/#expandall) method provided by the DetailRow module. Similarly, to collapse all grid rows, you can use the [collapseAll](https://ej2.syncfusion.com/vue/documentation/api/grid/detailRow/#collapseall) method. +By default, Grid renders all child grid rows in collapsed state. To expand all child grid rows in the Grid using an external button, you can utilize the [expandAll](https://ej2.syncfusion.com/vue/documentation/api/grid/detailRow#expandall) method provided by the DetailRow module. Similarly, to collapse all grid rows, you can use the [collapseAll](https://ej2.syncfusion.com/vue/documentation/api/grid/detailRow#collapseall) method. The following example demonstrates how to expand and collapse the hierarchy grid using an external button click function. @@ -219,7 +219,7 @@ The following example demonstrates how to expand and collapse the hierarchy grid The Syncfusion® Vue Grid allows you to hide the expand/collapse icon in the parent row when there are no records in the child grid. However, in certain scenarios, you may want to hide the expand/collapse icon for parent rows that do not have any child records, providing a cleaner and more intuitive interface by eliminating unnecessary icons in empty parent rows. -To achieve this, you can utilize the [rowDataBound](https://ej2.syncfusion.com/vue/documentation/api/grid/#rowdatabound) event to hide the icon when there are no records in the child grid. +To achieve this, you can utilize the [rowDataBound](https://ej2.syncfusion.com/vue/documentation/api/grid#rowdatabound) event to hide the icon when there are no records in the child grid. To hide the expand/collapse icon in parent row when no records in child grid, follow the given steps: @@ -293,6 +293,29 @@ In the demo below, the expand/collapse icons have been changed to arrow-down and {% previewsample "page.domainurl/code-snippet/grid/hierarchy-grid/default-icon" %} +## Detail row events + +The Grid component provides the `detailExpand` and `detailCollapse` events, which are triggered when a detail row is about to expand or collapse. These events fire before the detail row actually expands or collapses, allowing you to control whether the action should proceed. + +`detailExpand` – This event is triggered before a detail row begins to expand. You can access the expansion details through the event arguments and optionally prevent the expansion by setting: +`args.cancel = true`; + +`detailCollapse` – This event is triggered before a detail row begins to collapse. You can access the collapse details through the event arguments and optionally prevent the collapse by setting: +`args.cancel = true`; + +In the example below, expansion is prevented for the **Nancy** row, and collapse is prevented for the **Andrew** row. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/grid/hierarchy-grid/detail-row-events/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/grid/hierarchy-grid/detail-row-events/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/hierarchy-grid/ddetail-row-events" %} + ## Customize the child grid The Syncfusion® Vue Grid component offers various ways to customize the child grid appearance using both default CSS and custom themes. To access the child grid elements, you can use the **.e-detailcell** class selector, which targets the child grid. @@ -303,7 +326,7 @@ You can customize the appearance of the header elements in the child grid using **Customizing the child grid header** -To customize the appearance of the chid grid header root element, you can use the following CSS code: +To customize the appearance of the child grid header root element, you can use the following CSS code: ```css .e-detailcell .e-grid .e-headercontent{ diff --git a/ej2-vue/grid/images/foreign-key-filter.png b/ej2-vue/grid/images/foreign-key-filter.png new file mode 100644 index 000000000..e5ba33cf7 Binary files /dev/null and b/ej2-vue/grid/images/foreign-key-filter.png differ diff --git a/ej2-vue/grid/images/foreign-key-sorting.png b/ej2-vue/grid/images/foreign-key-sorting.png new file mode 100644 index 000000000..1484a71ed Binary files /dev/null and b/ej2-vue/grid/images/foreign-key-sorting.png differ diff --git a/ej2-vue/grid/row/detail-template.md b/ej2-vue/grid/row/detail-template.md index b5ff56e1a..315869932 100644 --- a/ej2-vue/grid/row/detail-template.md +++ b/ej2-vue/grid/row/detail-template.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Detail template in Vue Grid component -The detail template in the Grid component allows you to display additional information about a specific row in the grid by expanding or collapsing detail content. This feature is useful when you need to show additional data or custom content that is specific to each row in the grid. You can use the [detailTemplate](https://ej2.syncfusion.com/vue/documentation/api/grid/#detailtemplate) property to define an HTML template for the detail row. This template can include any HTML element or Vue component that you want to display as detail content. +The detail template in the Grid component allows you to display additional information about a specific row in the grid by expanding or collapsing detail content. This feature is useful when you need to show additional data or custom content that is specific to each row in the grid. You can use the [detailTemplate](https://ej2.syncfusion.com/vue/documentation/api/grid#detailtemplate) property to define an HTML template for the detail row. This template can include any HTML element or Vue component that you want to display as detail content. Here's an example of using the `detailTemplate` property in the grid component: @@ -319,9 +319,9 @@ td { The Grid component provides a powerful feature that allows you to render custom components inside the detail row. This feature is helpful when you need to add additional information or functionality for a specific row in the grid. -To render a custom component inside the detail row, you need to define a template using the [detailTemplate](https://ej2.syncfusion.com/vue/documentation/api/grid/#detailtemplate) property and handle the [detailDataBound](https://ej2.syncfusion.com/vue/documentation/api/grid/#detaildatabound) event.This template can include any HTML element or Vue component that you want to display as the detail content. +To render a custom component inside the detail row, you need to define a template using the [detailTemplate](https://ej2.syncfusion.com/vue/documentation/api/grid#detailtemplate) property and handle the [detailDataBound](https://ej2.syncfusion.com/vue/documentation/api/grid#detaildatabound) event.This template can include any HTML element or Vue component that you want to display as the detail content. -The `detailDataBound` event is an event that is triggered after a detail row is bound to data. This event provides an object of type [DetailDataBoundEventArgs](https://ej2.syncfusion.com/vue/documentation/api/grid/detaildataboundeventargs/) as a parameter. +The `detailDataBound` event is an event that is triggered after a detail row is bound to data. This event provides an object of type [DetailDataBoundEventArgs](https://ej2.syncfusion.com/vue/documentation/api/grid/detaildataboundeventargs) as a parameter. For example, to render grid inside the detail row, place an HTML div element as the `detailTemplate` and render the DIV element as grid component in the `detailDataBound` event. @@ -340,7 +340,7 @@ For example, to render grid inside the detail row, place an HTML div element as The Grid provides a feature that allows you to expand the detail row of a grid using an external button. By default, detail rows render in a collapsed state, but this feature enables users to view additional details associated with a particular row. -To achieve expanding the detail row of a grid using an external button, you need to invoke the [expand](https://ej2.syncfusion.com/vue/documentation/api/grid/detailRow/#expand) method provided by the **detailRowModule** object of the Syncfusion® Grid library. This method will expand the detail row of a specific grid row. +To achieve expanding the detail row of a grid using an external button, you need to invoke the [expand](https://ej2.syncfusion.com/vue/documentation/api/grid/detailRow#expand) method provided by the **detailRowModule** object of the Syncfusion® Grid library. This method will expand the detail row of a specific grid row. Here is an example of how to use the `expand` method to expand a detail row: @@ -989,4 +989,8 @@ Detail template is not supported with the following features: * Row spanning * Column spanning * Lazy load grouping -* State persistence \ No newline at end of file +* State persistence + +## See also + +* [Detail row events](../hierarchy-grid#detail-row-events) \ No newline at end of file diff --git a/ej2-vue/grid/selection/check-box-selection.md b/ej2-vue/grid/selection/check-box-selection.md index 040695c81..24a78caa0 100644 --- a/ej2-vue/grid/selection/check-box-selection.md +++ b/ej2-vue/grid/selection/check-box-selection.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## Checkbox selection in the Grid component allows you to provide an option to select multiple records by using a checkbox in each row. This feature is particularly useful when you need to perform bulk actions or operations on selected records within the Grid. -To render checkbox in each grid row, you need to use checkbox column with type as **checkbox** using column [type](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#type) property. +To render checkbox in each grid row, you need to use checkbox column with type as **checkbox** using column [type](https://ej2.syncfusion.com/vue/documentation/api/grid/column#type) property. Here's an example of how to enable check box selection using `type` property in the Grid component: @@ -27,12 +27,12 @@ Here's an example of how to enable check box selection using `type` property in {% previewsample "page.domainurl/code-snippet/grid/select/selection-checkbox" %} ->* By default selection is allowed by clicking a grid row or checkbox in that row. To allow selection only through checkbox, you can set [selectionSettings.checkboxOnly](https://ej2.syncfusion.com/vue/documentation/api/grid/selectionSettings/#checkboxonly) property to **true**. -> * Selection can be persisted on all the operations using [selectionSettings.persistSelection](https://ej2.syncfusion.com/vue/documentation/api/grid/selectionSettings/#persistselection) property. For persisting selection on the Grid, any one of the column should be defined as a primary key using [columns.isPrimaryKey](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#isprimarykey) property. +>* By default selection is allowed by clicking a grid row or checkbox in that row. To allow selection only through checkbox, you can set [selectionSettings.checkboxOnly](https://ej2.syncfusion.com/vue/documentation/api/grid/selectionSettings#checkboxonly) property to **true**. +> * Selection can be persisted on all the operations using [selectionSettings.persistSelection](https://ej2.syncfusion.com/vue/documentation/api/grid/selectionSettings#persistselection) property. For persisting selection on the Grid, any one of the column should be defined as a primary key using [columns.isPrimaryKey](https://ej2.syncfusion.com/vue/documentation/api/grid/column#isprimarykey) property. ## Checkbox selection mode -The checkbox selection mode in the Grid allows you to select rows either by clicking on checkboxes or by clicking on the rows themselves. This feature provides two types of checkbox selection modes that can be set using the [selectionSettings.checkboxMode](https://ej2.syncfusion.com/vue/documentation/api/grid/selectionSettings/#checkboxmode) property. The available modes are: +The checkbox selection mode in the Grid allows you to select rows either by clicking on checkboxes or by clicking on the rows themselves. This feature provides two types of checkbox selection modes that can be set using the [selectionSettings.checkboxMode](https://ej2.syncfusion.com/vue/documentation/api/grid/selectionSettings#checkboxmode) property. The available modes are: * **Default**: This is the default value of the `checkboxMode`. In this mode, you can select multiple rows by clicking rows one by one. When you click on a row, the checkbox associated with that row also switches to the **checked** state. * **ResetOnRowClick**: In `ResetOnRowClick` mode, when clicking on row it will reset previously selected row. Also you can perform multiple-selection in this mode by press and hold CTRL key and click the desired rows. To select range of rows, press and hold the SHIFT key and click the rows. @@ -54,7 +54,7 @@ In the following example, it demonstrates how to dynamically enable and change t You can hide the select all checkbox in the column header of the Syncfusion® Grid. This is a useful feature in various scenarios where you want to customize the appearance and behavior of the checkboxes within the grid. -By default, when you set the column type as [checkbox](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#type), it renders a column with checkboxes for selection purposes. However, if you want to hide the header checkbox, you can achieve this by defining an empty [headerTemplate](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#headertemplate) in the grid Column. +By default, when you set the column type as [checkbox](https://ej2.syncfusion.com/vue/documentation/api/grid/column#type), it renders a column with checkboxes for selection purposes. However, if you want to hide the header checkbox, you can achieve this by defining an empty [headerTemplate](https://ej2.syncfusion.com/vue/documentation/api/grid/column#headertemplate) in the grid Column. Here's an example of how to hide selectall checkbox in column header using empty `headerTemplate` in the Grid component: @@ -73,7 +73,7 @@ Here's an example of how to hide selectall checkbox in column header using empty The checkbox selection mode allows you to select rows either by clicking on checkboxes or by clicking on the rows themselves. However, there might be scenarios where you want to prevent specific rows from being selected based on certain conditions or business requirements. -To achieve this, you can use the [rowDataBound](https://ej2.syncfusion.com/vue/documentation/api/grid/#rowdatabound) event of the Grid. The `rowDataBound` event is triggered for each row after it is bound to the data source. In this event, you can check the row data and determine whether the row should be selectable or not. If you want to prevent the row from being selected, you can set the [isSelectable](https://ej2.syncfusion.com/vue/documentation/api/grid/rowDataBoundEventArgs/#isselectable) argument of the event to **false**. +To achieve this, you can use the [rowDataBound](https://ej2.syncfusion.com/vue/documentation/api/grid#rowdatabound) event of the Grid. The `rowDataBound` event is triggered for each row after it is bound to the data source. In this event, you can check the row data and determine whether the row should be selectable or not. If you want to prevent the row from being selected, you can set the [isSelectable](https://ej2.syncfusion.com/vue/documentation/api/grid/rowDataBoundEventArgs#isselectable) argument of the event to **false**. In the following sample, the selection of specific rows has been prevented based on the `isSelectable` argument in the `rowDataBound` event. @@ -88,13 +88,32 @@ In the following sample, the selection of specific rows has been prevented based {% previewsample "page.domainurl/code-snippet/grid/select/selection-checkbox-prevent" %} +## Partial selection using isRowSelectable + +The `isRowSelectable` callback in Syncfusion's EJ2 Grid allows control over which rows users can select. It uses a simple callback that runs before the grid loads the data. This callback checks each row data and returns **true** if the row can be selected, or **false** for non-selectable rows. + +For local data, the callback checks all items just once when the grid first loads. For remote data, it only checks the rows shown on the current page when the grid first appears. It re-checks them every time an action occurs, such as changing pages, filtering, or sorting. + +In the example below, it prevents selection of rows with canceled orders. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/grid/select/prevent-checkbox-selection/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/grid/select/prevent-checkbox-selection/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/select/prevent-checkbox-selection" %} + ## How to select single row in checkbox selection mode The Vue Grid allows you to select only one row at a time within the Grid. This feature is particularly useful when you want to ensure that only a single row is selected, and any previous selections are cleared when a new row is selected. -To achieve single-row selection in checkbox selection mode within the Grid, you can handle the [rowSelecting](https://ej2.syncfusion.com/vue/documentation/api/grid/#rowselecting) event and use the [clearSelection](https://ej2.syncfusion.com/vue/documentation/api/grid/#clearselection) method to clear any previous selections before selecting a new row. This ensures that only one row is selected at a time, and any prior selections are deselected when a new row is chosen. +To achieve single-row selection in checkbox selection mode within the Grid, you can handle the [rowSelecting](https://ej2.syncfusion.com/vue/documentation/api/grid#rowselecting) event and use the [clearSelection](https://ej2.syncfusion.com/vue/documentation/api/grid#clearselection) method to clear any previous selections before selecting a new row. This ensures that only one row is selected at a time, and any prior selections are deselected when a new row is chosen. ->* When you set the [checkboxMode](https://ej2.syncfusion.com/vue/documentation/api/grid/selectionSettings/#checkboxmode) property to **ResetOnRowClick**, it will reset the previously selected row when you click on a new row. Please note that this behavior applies to rows and not checkboxes, and it is the default behavior of the grid. +>* When you set the [checkboxMode](https://ej2.syncfusion.com/vue/documentation/api/grid/selectionSettings#checkboxmode) property to **ResetOnRowClick**, it will reset the previously selected row when you click on a new row. Please note that this behavior applies to rows and not checkboxes, and it is the default behavior of the grid. Here's an example of how to select a single row in checkbox selection mode using the `clearSelection` method along with the `rowSelecting` event: @@ -111,7 +130,7 @@ Here's an example of how to select a single row in checkbox selection mode using ## Allow selection only through checkbox click -By default, the Grid component allows selection by clicking either a grid row or the checkbox within that row. If you want to restrict selection so that it can only be done by clicking the checkboxes, you can set the [selectionSettings.checkboxOnly](https://ej2.syncfusion.com/vue/documentation/api/grid/selectionSettings/#checkboxonly) property to **true**. +By default, the Grid component allows selection by clicking either a grid row or the checkbox within that row. If you want to restrict selection so that it can only be done by clicking the checkboxes, you can set the [selectionSettings.checkboxOnly](https://ej2.syncfusion.com/vue/documentation/api/grid/selectionSettings#checkboxonly) property to **true**. Here's an example of how to enable selection only through checkbox click using `checkboxOnly` property: diff --git a/ej2-vue/image-editor/how-to/clear-image.md b/ej2-vue/image-editor/how-to/clear-image.md index 9c41d02f5..234f51111 100644 --- a/ej2-vue/image-editor/how-to/clear-image.md +++ b/ej2-vue/image-editor/how-to/clear-image.md @@ -2,7 +2,7 @@ layout: post title: Clear an Image in ##Platform_Name## Image editor control | Syncfusion description: Learn here all about Clear an Image in Syncfusion ##Platform_Name## Image editor control of Syncfusion Essential JS 2 and more. -platform: ej2-javascript +platform: ej2-vue control: Clear an Image publishingplatform: ##Platform_Name## documentation: ug @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Clear an Image in the Vue Image Editor component -The [`clearImage`](https://ej2.syncfusion.com/vue/documentation/api/image-editor/#clearimage) method in the image editor control is indeed useful for scenarios where you need to ensure that the image editor is emptied before reopening it, especially if the editor is used within a dialog. By using `clearImage` before closing the dialog, you can ensure that the editor does not retain the previously loaded image when the dialog is reopened. This allows users to start fresh with a new image selection. +The [`clearImage`](https://ej2.syncfusion.com/vue/documentation/api/image-editor/index-default#clearimage) method in the image editor control is indeed useful for scenarios where you need to ensure that the image editor is emptied before reopening it, especially if the editor is used within a dialog. By using `clearImage` before closing the dialog, you can ensure that the editor does not retain the previously loaded image when the dialog is reopened. This allows users to start fresh with a new image selection. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/ej2-vue/image-editor/how-to/fit-to-width-and-height.md b/ej2-vue/image-editor/how-to/fit-to-width-and-height.md new file mode 100644 index 000000000..b10497d81 --- /dev/null +++ b/ej2-vue/image-editor/how-to/fit-to-width-and-height.md @@ -0,0 +1,27 @@ +--- +layout: post +title: Fit to Width and Height in ##Platform_Name## Image Editor | Syncfusion +description: Learn here all about Fit to Width and Height in Syncfusion Vue Image editor component of Syncfusion Essential JS 2 and more. +platform: ej2-vue +control: Fit to Width and Height +publishingplatform: ##Platform_Name## +documentation: ug +domainurl: ##DomainURL## +--- + +# Fit Image to Editor Width and Height + +The Image Editor's [`zoom`](https://ej2.syncfusion.com/vue/documentation/api/image-editor/index-default#zoom) method to fit an image to the editor by width or height. Programmatically increase the zoom level until the image dimension matches the editor container's width or height. + +This example demonstrates scenarios that include buttons for fitting the image to its width (Fit Width) or height (Fit Height). + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/image-editor/getting-started-cs37/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/image-editor/getting-started-cs37/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/image-editor/getting-started-cs37" %} diff --git a/ej2-vue/image-editor/how-to/render-dialog.md b/ej2-vue/image-editor/how-to/render-dialog.md index 05ef5735c..429e54ab5 100644 --- a/ej2-vue/image-editor/how-to/render-dialog.md +++ b/ej2-vue/image-editor/how-to/render-dialog.md @@ -1,15 +1,15 @@ --- layout: post -title: Render Image Editor in Dialog in ##Platform_Name## Image editor control | Syncfusion +title: Render Editor in Dialog in ##Platform_Name## Image editor | Syncfusion description: Learn here all about Render Image Editor in Dialog in Syncfusion ##Platform_Name## Image editor control of Syncfusion Essential JS 2 and more. -platform: ej2-javascript +platform: ej2-vue control: Render Image Editor in Dialog publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## --- -### Render Image Editor in Dialog +# Render Image Editor in Dialog Rendering the Image Editor in a dialog involves displaying the image editor component within a modal dialog window, allowing users to edit images in a pop-up interface. This can be useful for maintaining a clean layout and providing a focused editing experience without navigating away from the current page. diff --git a/ej2-vue/image-editor/how-to/reset-image.md b/ej2-vue/image-editor/how-to/reset-image.md index 32a736294..bdee7b8ee 100644 --- a/ej2-vue/image-editor/how-to/reset-image.md +++ b/ej2-vue/image-editor/how-to/reset-image.md @@ -2,7 +2,7 @@ layout: post title: Reset an image in ##Platform_Name## Image editor control | Syncfusion description: Learn here all about Reset an image in Syncfusion ##Platform_Name## Image editor control of Syncfusion Essential JS 2 and more. -platform: ej2-javascript +platform: ej2-vue control: Reset an image publishingplatform: ##Platform_Name## documentation: ug @@ -11,6 +11,6 @@ domainurl: ##DomainURL## # Reset an image in the Vue Image Editor component -The [`reset`](https://ej2.syncfusion.com/javascript/documentation/api/image-editor/#reset) method in the Image Editor control provides the capability to undo all the changes made to an image and revert it back to its original state. This method is particularly useful when multiple adjustments, annotations, or transformations have been applied to an image and you want to start over with the original, unmodified version of the image. +The [`reset`](https://ej2.syncfusion.com/vue/documentation/api/image-editor/index-default#reset) method in the Image Editor control provides the capability to undo all the changes made to an image and revert it back to its original state. This method is particularly useful when multiple adjustments, annotations, or transformations have been applied to an image and you want to start over with the original, unmodified version of the image. By invoking the `reset` method, any modifications or edits made to the image will be undone, and the image will be restored to its initial state. This allows you to easily discard any changes and begin again with the fresh, unaltered image. \ No newline at end of file diff --git a/ej2-vue/images/chart_elements.png b/ej2-vue/images/chart_elements.png new file mode 100644 index 000000000..b0492c47c Binary files /dev/null and b/ej2-vue/images/chart_elements.png differ diff --git a/ej2-vue/rich-text-editor/clipboard-cleanup.md b/ej2-vue/rich-text-editor/clipboard-cleanup.md new file mode 100644 index 000000000..a9cf95e57 --- /dev/null +++ b/ej2-vue/rich-text-editor/clipboard-cleanup.md @@ -0,0 +1,60 @@ +--- +layout: post +title: Clipboard cleanup in Vue Rich text editor component | Syncfusion +description: Learn here all about Clipboard cleanup in Syncfusion Vue Rich text editor component of Syncfusion Essential JS 2 and more. +control: Clipboard cleanup +platform: ej2-vue +documentation: ug +domainurl: ##DomainURL## +--- + +# Clipboard Cleanup in Vue 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/vue/documentation/api/rich-text-editor#enableClipboardCleanup) property. + +> To use Clipboard cleanup feature, inject `ClipboardCleanup` in the provider section. + +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. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/rich-text-editor/clipboard-cleanup/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/rich-text-editor/clipboard-cleanup/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/rich-text-editor/clipboard-cleanup" %} + +## Customizing Copied/Cut Content + +You can use the [beforeClipboardWrite](https://ej2.syncfusion.com/vue/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. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/rich-text-editor/clipboard-cleanup-customize/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/rich-text-editor/clipboard-cleanup-customize/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/rich-text-editor/clipboard-cleanup-customize" %} + +## 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 Vue). diff --git a/ej2-vue/rich-text-editor/import-and-export.md b/ej2-vue/rich-text-editor/import-and-export.md index 182a8cf31..b8b12aaf8 100644 --- a/ej2-vue/rich-text-editor/import-and-export.md +++ b/ej2-vue/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 [items](https://ej2.syncfusion.com/vue/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 [items](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/toolbarsettings#items) using the items property in toolbarSettings. The following example illustrates how to set up the `ImportWord` in the Rich Text Editor to facilitate content importation from Word documents: @@ -29,7 +29,62 @@ The following example illustrates how to set up the `ImportWord` in the Rich Tex {% previewsample "page.domainurl/code-snippet/rich-text-editor/import-word-cs1" %} -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/vue/documentation/api/rich-text-editor/index-default#wordimporting) event provides [UploadingEventArgs](https://ej2.syncfusion.com/vue/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. + +The following example demonstrates how to configure `wordImporting` for secure importing: + +```typescript + ++ ++ + + ++ + +``` + +Here’s how to handle the server-side action for importing content from Word with authentication. ```csharp @@ -43,6 +98,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) { @@ -99,7 +158,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 [items](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/toolbarSettings/#items) property. +You can add `ExportWord` and `ExportPdf` tools to the Rich Text Editor toolbar using the toolbarSettings [items](https://ej2.syncfusion.com/vue/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: @@ -114,7 +173,83 @@ The following example demonstrates how to configure the `ExportWord` and `Export {% previewsample "page.domainurl/code-snippet/rich-text-editor/export-wordPdf-cs1" %} -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/vue/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: + +```typescript + + ++ + +``` + +Here’s how to handle the server-side action for exporting content to PDF and Microsoft Word with authentication for exporting content to PDF and Microsoft Word ```csharp @@ -128,6 +263,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 == "") { @@ -202,6 +341,8 @@ public class RichTextEditorController : Controller public class ExportParam { public string html { get; set; } + // For receiving custom form data + public List+ ++ + + + +{% endhighlight %} +{% endtabs %} + +### Dynamic range adjustment based on content + +When the editor is created, the actual length of the text content is calculated, and the slider’s maximum value is updated dynamically to match this length. This ensures that the slider range always reflects the current content size. The editor is also focused programmatically to make the selection visible, and an initial selection is applied based on the slider’s default values. + +{% tabs %} +{% highlight html tabtitle="~/src/App.vue" %} + + + + + + + +{% endhighlight %} +{% endtabs %} + +### Helper function for accurate offset calculation + +The `getTextNodeAtOffset()` function uses a `TreeWalker` to traverse text nodes inside the editor and determine the exact node and offset for a given character index. This ensures that even complex content structures are handled correctly. + +{% tabs %} +{% highlight html tabtitle="~/src/App.vue" %} + + + +{% endhighlight %} +{% endtabs %} {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -63,7 +242,7 @@ The following example demonstrates how to select a table cell programmatically u ## Select all content -To select all content within the Rich Text Editor, use the [selectAll](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/index-default#selectall/) method. This method highlights all the text and elements inside the editor, allowing users to perform actions such as formatting or deleting the entire content. +To select all content within the Rich Text Editor, use the [selectAll](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/index-default#selectall) method. This method highlights all the text and elements inside the editor, allowing users to perform actions such as formatting or deleting the entire content. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/ej2-vue/rich-text-editor/smart-editing/mail-merge.md b/ej2-vue/rich-text-editor/smart-editing/mail-merge.md index 25c7288f2..48ba2263e 100644 --- a/ej2-vue/rich-text-editor/smart-editing/mail-merge.md +++ b/ej2-vue/rich-text-editor/smart-editing/mail-merge.md @@ -8,12 +8,219 @@ documentation: ug domainurl: ##DomainURL## --- -# Mail merge in Vue Rich Text Editor Component +# Mail merge in Vue Rich Text Editor component The Rich Text Editor can be customized to implement **Mail Merge** functionality by inserting placeholders into the editor using custom toolbar items. These placeholders are later replaced with actual data to generate personalized content such as letters, invoices, and reports. This feature simplifies the creation of dynamic documents by allowing users to insert merge fields that are automatically populated with real data during content generation. +## Adding custom toolbar items for inserting merge fields + +To enable mail merge functionality, the Rich Text Editor toolbar is extended with two custom buttons: `Insert Field` and `Merge Data`. These buttons are added using the `template` property in [toolbarSettings.items](https://helpej2.syncfusion.com/vue/documentation/api/rich-text-editor/toolbarSettingsModel#items), which points to custom HTML elements (#insertField and #merge_data). + +- **Insert Field:** Opens a dropdown list of merge fields for inserting placeholders like `{{FirstName}}` into the editor. +- **Merge Data:** Replaces all placeholders in the editor with actual values from a predefined data source. + +{% tabs %} +{% highlight html tabtitle="~/src/App.vue" %} + + + + + + + +{% endhighlight %} +{% endtabs %} + +## Using DropDownButton for selecting placeholders + +The **DropDownButton** component displays a list of merge fields such as First Name, Last Name, and Company Name. When a user selects an item, the corresponding placeholder (e.g., {{FirstName}}) is inserted at the current cursor position using the `insertHTML` command. + +{% tabs %} +{% highlight html tabtitle="~/src/App.vue" %} + + + + + + + +{% endhighlight %} +{% endtabs %} + +## Populating merge fields using Mention + +The **Mention** component provides an alternative way to insert placeholders by typing the {{character inside the editor. A popup list of merge fields appears, allowing quick selection without using the toolbar. + +{% tabs %} +{% highlight html tabtitle="~/src/App.vue" %} + ++ + {{ formatMentionTemplate(data.value) }} + + + + + +{% endhighlight %} +{% endtabs %} + +## Replacing placeholders with actual data dynamically + +When the **Merge Data** button is clicked, the editor content is processed to replace all placeholders with actual values from the `placeholderData` object. This is done using a regular expression in the `replacePlaceholders()` function. + +{% tabs %} +{% highlight html tabtitle="~/src/App.vue" %} + + + + + + + +{% endhighlight %} +{% endtabs %} + {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} {% include code-snippet/rich-text-editor/mail-merge/app-composition.vue %} @@ -21,4 +228,6 @@ This feature simplifies the creation of dynamic documents by allowing users to i {% highlight html tabtitle="Options API (~/src/App.vue)" %} {% include code-snippet/rich-text-editor/mail-merge/app.vue %} {% endhighlight %} -{% endtabs %} \ No newline at end of file +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/rich-text-editor/mail-merge-cs1" %} \ No newline at end of file diff --git a/ej2-vue/rich-text-editor/tools/text-formatting.md b/ej2-vue/rich-text-editor/tools/text-formatting.md index 4b762224d..101af85aa 100644 --- a/ej2-vue/rich-text-editor/tools/text-formatting.md +++ b/ej2-vue/rich-text-editor/tools/text-formatting.md @@ -344,6 +344,44 @@ While the toolbar does not provide a direct method to apply blockquote formattin {% previewsample "page.domainurl/code-snippet/rich-text-editor/nesting-blockquote" %} +## 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/vue/documentation/api/rich-text-editor/toolbarSettings#items) property. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/rich-text-editor/line-height/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/rich-text-editor/line-height/app.vue %} +{% 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/vue/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/vue/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/vue/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. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/rich-text-editor/line-height-cs1/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/rich-text-editor/line-height-cs1/app.vue %} +{% 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. @@ -481,4 +519,48 @@ 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-cs2" %} \ No newline at end of file +{% previewsample "page.domainurl/code-snippet/rich-text-editor/remove-formatting-cs2" %} + +## Markdown Auto Format + +The Rich Text Editor supports automatic conversion of Markdown syntax into HTML using the [enableMarkdownAutoFormat](https://ej2.syncfusion.com/vue/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 `#`. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/rich-text-editor/markdown-autoformat-cs1/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/rich-text-editor/markdown-autoformat-cs1/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/rich-text-editor/markdown-autoformat-cs1" %} \ No newline at end of file diff --git a/ej2-vue/treegrid/columns/column-spanning.md b/ej2-vue/treegrid/columns/column-spanning.md new file mode 100644 index 000000000..203f317b4 --- /dev/null +++ b/ej2-vue/treegrid/columns/column-spanning.md @@ -0,0 +1,74 @@ +--- +layout: post +title: Column spanning in Vue TreeGrid | Syncfusion +description: Learn here all about Column spanning in Syncfusion Vue TreeGrid of Syncfusion Essential JS 2 and more. +control: Column spanning +platform: ej2-vue +documentation: ug +domainurl: ##DomainURL## +--- + +# Column spanning in Vue TreeGrid + +The column spanning feature in the Syncfusion® Vue 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/vue/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 html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/treegrid/columns/column-spanning-cs1/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/treegrid/columns/column-spanning-cs1/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/treegrid/columns/column-spanning-cs1" %} + +## Limitations + +Column spanning in the Vue TreeGrid has the following limitations: + +* The [updateCell](https://ej2.syncfusion.com/vue/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 Vue 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 Vue 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 html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/treegrid/columns/column-spanning-cs2/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/treegrid/columns/column-spanning-cs2/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/treegrid/columns/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/vue/documentation/treegrid/row/row-spanning) \ No newline at end of file diff --git a/ej2-vue/treegrid/row/row-spanning.md b/ej2-vue/treegrid/row/row-spanning.md new file mode 100644 index 000000000..35c50e3fd --- /dev/null +++ b/ej2-vue/treegrid/row/row-spanning.md @@ -0,0 +1,74 @@ +--- +layout: post +title: Row spanning in Vue TreeGrid | Syncfusion +description: Learn here all about Row spanning in Syncfusion Vue TreeGrid of Syncfusion Essential JS 2 and more. +control: Row spanning +platform: ej2-Vue +documentation: ug +domainurl: ##DomainURL## +--- + +# Row spanning in Vue TreeGrid + +The row spanning feature in the Syncfusion® Vue 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/vue/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 html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/treegrid/row/row-spanning-cs1/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/treegrid/row/row-spanning-cs1/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/treegrid/row/row-spanning-cs1" %} + +## Limitations + +Row spanning in the Vue TreeGrid has the following limitations: + +* The [updateCell](https://ej2.syncfusion.com/vue/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 Vue 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 Vue 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 html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/treegrid/row/row-spanning-cs2/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/treegrid/row/row-spanning-cs2/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/treegrid/row/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/vue/documentation/treegrid/columns/column-spanning) \ No newline at end of file diff --git a/ej2-vue/treegrid/selection/check-box-selection.md b/ej2-vue/treegrid/selection/check-box-selection.md index 4caf7ad9e..2afeac428 100644 --- a/ej2-vue/treegrid/selection/check-box-selection.md +++ b/ej2-vue/treegrid/selection/check-box-selection.md @@ -13,7 +13,7 @@ domainurl: ##DomainURL## Checkbox Selection provides an option to select multiple TreeGrid records with help of checkbox in each row. To render checkbox in each treegrid row, you need to use checkbox column with type as `CheckBox` using -column [`type`](https://ej2.syncfusion.com/vue/documentation/api/treegrid/column/#type) property. +column [`type`](https://ej2.syncfusion.com/vue/documentation/api/treegrid/column#type) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -27,16 +27,16 @@ column [`type`](https://ej2.syncfusion.com/vue/documentation/api/treegrid/column {% previewsample "page.domainurl/code-snippet/treegrid/selection/default-cs2" %} > By default selection is allowed by clicking a treegrid row or checkbox in that row. To allow Selection only through checkbox, you can set -[`selectionSettings.checkboxOnly`](https://ej2.syncfusion.com/vue/documentation/api/treegrid/selectionSettings/#checkboxonly) property to true. +[`selectionSettings.checkboxOnly`](https://ej2.syncfusion.com/vue/documentation/api/treegrid/selectionSettings#checkboxonly) property to true. > Selection can be persisted on all the operations -using [`selectionSettings.persistSelection`](https://ej2.syncfusion.com/vue/documentation/api/treegrid/selectionSettings/#persistselection) property. +using [`selectionSettings.persistSelection`](https://ej2.syncfusion.com/vue/documentation/api/treegrid/selectionSettings#persistselection) property. For persisting selection on the TreeGrid, any one of the column should be defined as a primary key -using [`columns.isPrimaryKey`](https://ej2.syncfusion.com/vue/documentation/api/treegrid/column/#isprimarykey) property. +using [`columns.isPrimaryKey`](https://ej2.syncfusion.com/vue/documentation/api/treegrid/column#isprimarykey) property. ## Checkbox selection mode In checkbox selection, selection can also be done by clicking on rows. This selection provides two types of Checkbox Selection mode which can be set by using the following API, -[`selectionSettings.checkboxMode`](https://ej2.syncfusion.com/vue/documentation/api/treegrid/selectionSettings/#checkboxmode). The modes are; +[`selectionSettings.checkboxMode`](https://ej2.syncfusion.com/vue/documentation/api/treegrid/selectionSettings#checkboxmode). The modes are; * **`Default`**: This is the default value of the checkboxMode. In this mode, user can select multiple rows by clicking rows one by one. * **`ResetOnRowClick`**: In ResetOnRowClick mode, when user clicks on a 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. @@ -52,4 +52,53 @@ In checkbox selection, selection can also be done by clicking on rows. This sele {% previewsample "page.domainurl/code-snippet/treegrid/selection/default-cs3" %} -> Checkbox Selection feature is intended for row selection only; it is not compatible with cell selection mode. \ No newline at end of file +> Checkbox Selection feature is intended for row selection only; it is not compatible with cell selection mode. + +## Conditional row selection + +The TreeGrid supports conditional row selection through the [isRowSelectable](https://ej2.syncfusion.com/vue/documentation/api/treegrid#isRowSelectable) property. This feature enables dynamic business logic to determine which rows can be selected, ensuring that only rows meeting specific conditions are selectable. The `isRowSelectable` property accepts a function that evaluates each row’s data and returns **true** to enable selection or **false** to disable it. The function is executed for the entire data source before rendering, making it suitable for scenarios where selection must be restricted based on criteria. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/treegrid/selection/default-cs7/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/treegrid/selection/default-cs7/app.vue %} +{% endhighlight %} +{% endtabs %} + +In this sample, checkbox selection is disabled for rows where the "Progress" column has the value **"Completed"**. + +## Checkbox Selection In Tree Column + +1. ### Enable checkboxes in tree column + + To render checkboxes in tree column, you need to set `columns.showCheckbox` property as `true`. + + It is possible to select rows hierarchically using checkboxes in TreeGrid by enabling the `autoCheckHierarchy` property. When a parent record’s checkbox is checked, the checkboxes of its child records are automatically selected and vice-versa. + + {% tabs %} + {% highlight html tabtitle="Composition API (~/src/App.vue)" %} + {% include code-snippet/treegrid/columns/default-cs13/app-composition.vue %} + {% endhighlight %} + {% highlight html tabtitle="Options API (~/src/App.vue)" %} + {% include code-snippet/treegrid/columns/default-cs13/app.vue %} + {% endhighlight %} + {% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/columns/default-cs13" %} + +2. ### Column cell checkbox support for row selection in virtualization + + The TreeGrid component is designed to handle large datasets while providing flexible checkbox selection with virtualization enabled. The [`showCheckbox`](https://ej2.syncfusion.com/vue/documentation/api/treegrid/columnmodel#showcheckbox) property property displays checkboxes in tree column cells, allowing users to select or deselect them directly. This functionality is enabled by setting the property to "**true**". Similarly, the [`enableVirtualization`](https://ej2.syncfusion.com/vue/documentation/api/treegrid#enablevirtualization) property enhances performance by rendering only the visible rows and columns during scrolling. This feature is activated by setting the property to "**true**". + + {% tabs %} + {% highlight html tabtitle="Composition API (~/src/App.vue)" %} + {% include code-snippet/treegrid/selection/default-cs8/app-composition.vue %} + {% endhighlight %} + {% highlight html tabtitle="Options API (~/src/App.vue)" %} + {% include code-snippet/treegrid/selection/default-cs8/app.vue %} + {% endhighlight %} + {% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/selection/default-cs8" %} \ No newline at end of file diff --git a/ej2-vue/treeview/images/customize-based-on-level.png b/ej2-vue/treeview/images/customize-based-on-level.png new file mode 100644 index 000000000..e40aed3a5 Binary files /dev/null and b/ej2-vue/treeview/images/customize-based-on-level.png differ diff --git a/ej2-vue/treeview/images/customize-checkbox.png b/ej2-vue/treeview/images/customize-checkbox.png new file mode 100644 index 000000000..7db280d36 Binary files /dev/null and b/ej2-vue/treeview/images/customize-checkbox.png differ diff --git a/ej2-vue/treeview/images/customize-expand-collapse-icon.png b/ej2-vue/treeview/images/customize-expand-collapse-icon.png new file mode 100644 index 000000000..3b47ce5b3 Binary files /dev/null and b/ej2-vue/treeview/images/customize-expand-collapse-icon.png differ diff --git a/ej2-vue/treeview/images/customize-html-attribute.png b/ej2-vue/treeview/images/customize-html-attribute.png new file mode 100644 index 000000000..7bb65fd3f Binary files /dev/null and b/ej2-vue/treeview/images/customize-html-attribute.png differ diff --git a/ej2-vue/treeview/images/customize-node-height.png b/ej2-vue/treeview/images/customize-node-height.png new file mode 100644 index 000000000..25a1301e6 Binary files /dev/null and b/ej2-vue/treeview/images/customize-node-height.png differ diff --git a/ej2-vue/treeview/images/customize-treeview-text.png b/ej2-vue/treeview/images/customize-treeview-text.png new file mode 100644 index 000000000..5ed3c3ae7 Binary files /dev/null and b/ej2-vue/treeview/images/customize-treeview-text.png differ diff --git a/ej2-vue/treeview/style.md b/ej2-vue/treeview/style.md new file mode 100644 index 000000000..3c9384be1 --- /dev/null +++ b/ej2-vue/treeview/style.md @@ -0,0 +1,107 @@ +--- +layout: post +title: Styles and Appearance in Vue TreeView component | Syncfusion +description: Checkout and learn here all about styles and appearance in Syncfusion Vue TreeView component of Syncfusion Essential JS 2 and more. +platform: ej2-vue +control: TreeView +documentation: ug +domainurl: ##DomainURL## +--- + +# Styles and Appearance in Vue TreeView Component + +The following content provides the exact CSS structure that can be used to modify the component's appearance based on the user preference. + +## Customizing the height of TreeView nodes + +Use the following CSS to customize the TreeView nodes. + +```css +.e-treeview .e-list-item { + line-height: 45px; +} +.e-treeview .e-fullrow { + height: 45px; +} +``` + + +## Customizing the text of TreeView nodes + +Use the following CSS to customize the text of TreeView nodes. + +```css +.e-treeview .e-list-text { + font-weight: bold; + color:yellow !important; +} +``` + + +## Customizing the TreeView expand and collapse icons + +Use the following CSS to customize the TreeView expand and collapse icons. + +```css +.e-treeview .e-icon-expandable { + color: red; +} +.e-treeview .e-icon-collapsible { + color: black; +} +``` + + +## Customizing the TreeView checkboxes + +Use the following CSS to customize the TreeView checkboxes. + +```css +.e-checkbox-wrapper .e-frame { + border:aqua solid 2px !important; + border-radius: 50% !important; +} +.e-checkbox-wrapper:hover .e-frame{ + border:black solid 2px !important; + border-radius:50% !important; +} +``` + + +## Customizing the TreeView nodes based on levels + +Use the following CSS to customize the TreeView nodes based on levels. + +```css +.e-treeview .e-level-2 > .e-text-content { + background: #E6F4FF; + border: 1px solid #99C9FF; +} +``` + + +## Customizing the TreeView using HtmlAttributes + +The [htmlAttributes](https://ej2.syncfusion.com/vue/documentation/api/treeview/fieldssettingsmodel#htmlattributes) property of the TreeView component allows you to define a mapping field for applying custom HTML attributes to individual TreeView nodes. + +By using attributes, you can customize specific nodes effectively. For instance, in the given example, a 'child-node' class is added to a specific node, allowing you to customize the corresponding node via CSS. + +```css +.child-node { + font-weight: bold; + background-color: aqua; +} +``` + +Here is the summarized code for the above steps in the **src/App.vue** file: + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/treeview/node-style-cs1/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/treeview/node-style-cs1/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/treeview/node-style-cs1" %} diff --git a/ej2-vue/visual-studio-code-integration/images/frameworktype.png b/ej2-vue/visual-studio-code-integration/images/frameworktype.png index afd3b9fab..aa93bc25a 100644 Binary files a/ej2-vue/visual-studio-code-integration/images/frameworktype.png and b/ej2-vue/visual-studio-code-integration/images/frameworktype.png differ diff --git a/ej2-vue/visual-studio-code-integration/images/run.png b/ej2-vue/visual-studio-code-integration/images/run.png index b60892a0c..a8c54dd3f 100644 Binary files a/ej2-vue/visual-studio-code-integration/images/run.png and b/ej2-vue/visual-studio-code-integration/images/run.png differ diff --git a/ej2-vue/visual-studio-code-integration/images/vue-styles.png b/ej2-vue/visual-studio-code-integration/images/vue-styles.png index e000b64ff..98990d23c 100644 Binary files a/ej2-vue/visual-studio-code-integration/images/vue-styles.png and b/ej2-vue/visual-studio-code-integration/images/vue-styles.png differ diff --git a/ej2-vue/visual-studio-code-integration/images/vue-versions.png b/ej2-vue/visual-studio-code-integration/images/vue-versions.png index 567e83205..3af7bce52 100644 Binary files a/ej2-vue/visual-studio-code-integration/images/vue-versions.png and b/ej2-vue/visual-studio-code-integration/images/vue-versions.png differ diff --git a/ej2-vue/visual-studio-code-integration/overview.md b/ej2-vue/visual-studio-code-integration/overview.md index 82327ac60..d818c4841 100644 --- a/ej2-vue/visual-studio-code-integration/overview.md +++ b/ej2-vue/visual-studio-code-integration/overview.md @@ -1,6 +1,6 @@ --- layout: post -title: Overview in Vue Visual studio code integration component | Syncfusion +title: Overview in Vue Visual studio code integration | Syncfusion description: Learn here all about Overview in Syncfusion Vue Visual studio code integration component of Syncfusion Essential JS 2 and more. control: Overview platform: ej2-vue @@ -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-vue/visual-studio-code-integration/visual-studio-code-extensions/create-project.md b/ej2-vue/visual-studio-code-integration/visual-studio-code-extensions/create-project.md index 1531bfc07..d9d00282f 100644 --- a/ej2-vue/visual-studio-code-integration/visual-studio-code-extensions/create-project.md +++ b/ej2-vue/visual-studio-code-integration/visual-studio-code-extensions/create-project.md @@ -1,6 +1,6 @@ --- layout: post -title: Create project in Vue Visual studio code integration component | Syncfusion +title: Create Vue project in Visual studio code | Syncfusion description: Learn here all about Create project in Syncfusion Vue Visual studio code integration component of Syncfusion Essential JS 2 and more. control: Create project platform: ej2-vue @@ -12,7 +12,7 @@ domainurl: ##DomainURL## ## 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. +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, Pure 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. @@ -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 diff --git a/ej2-vue/visual-studio-code-integration/visual-studio-code-extensions/download-and-installation.md b/ej2-vue/visual-studio-code-integration/visual-studio-code-extensions/download-and-installation.md index 13656bec5..5959ad04d 100644 --- a/ej2-vue/visual-studio-code-integration/visual-studio-code-extensions/download-and-installation.md +++ b/ej2-vue/visual-studio-code-integration/visual-studio-code-extensions/download-and-installation.md @@ -1,6 +1,6 @@ --- layout: post -title: Download and installation in Vue 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 Vue Visual studio code integration component of Syncfusion Essential JS 2 and more. control: Download and installation platform: ej2-vue @@ -14,7 +14,7 @@ Syncfusion® publishes the Visual Studio Cod ## 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). +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, Pure React, Angular, and Vue). * [Visual Studio Code](https://code.visualstudio.com/download)
- Weekly Release