diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/ai-coding-assistant/prompt-library.md b/ej2-asp-core-mvc/EJ2_ASP.MVC/ai-coding-assistant/prompt-library.md new file mode 100644 index 0000000000..70a65784c9 --- /dev/null +++ b/ej2-asp-core-mvc/EJ2_ASP.MVC/ai-coding-assistant/prompt-library.md @@ -0,0 +1,270 @@ +--- +layout: post +title: Syncfusion AI Coding Assistant Prompt Library | Syncfusion +description: Explore the AI Coding Assistant Prompt Library to enhance ASP.NET MVC development productivity with code generation, configuration example, contextual guidance. +control: Syncfusion AI Coding Assistant Prompt Library +platform: ej2-asp-core-mvc +documentation: ug +domainurl: ##DomainURL## +--- + +# Prompt Library - AI Coding Assistant + +Speed up your A 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 #SyncfusionAspNetMvcAssistant 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 ASP.NET MVC Data Grid delivers fast, flexible tables for large datasets with built-in interactivity. + +{% promptcards %} +{% promptcard Paging and Sorting %} +#SyncfusionAspNetMvcAssistant How do I enable paging and sorting in the Syncfusion ASP.NET MVC Grid? +{% endpromptcard %} +{% promptcard Grouping and Filtering %} +#SyncfusionAspNetMvcAssistant Show me an example of grouping and filtering data in the Grid component. +{% endpromptcard %} +{% promptcard CRUD Operations %} +#SyncfusionAspNetMvcAssistant What’s the code to implement full CRUD operations in Syncfusion ASP.NET MVC Grid? +{% endpromptcard %} +{% promptcard Grid Export to PDF and Excel %} +#SyncfusionAspNetMvcAssistant How can I add PDF and Excel export options to the Grid toolbar? +{% endpromptcard %} +{% promptcard Virtual Scrolling %} +#SyncfusionAspNetMvcAssistant How do I configure virtual scrolling for large datasets in the Grid? +{% endpromptcard %} +{% promptcard Multicolumn Grid Setup %} +#SyncfusionAspNetMvcAssistant Create a multicolumn Grid to display product details with sorting and filtering. +{% endpromptcard %} +{% promptcard Chat Integration %} +#SyncfusionAspNetMvcAssistant How can I integrate a chat widget inside each row of the Syncfusion Grid? +{% endpromptcard %} +{% promptcard Advanced Grid Features %} +#SyncfusionAspNetMvcAssistant Show me a Grid with paging, sorting, grouping, filtering, and virtual scrolling +{% endpromptcard %} +{% promptcard Troubleshooting Grid Export %} +#SyncfusionAspNetMvcAssistant Why isn’t my Grid exporting to PDF and Excel correctly? +{% endpromptcard %} +{% promptcard Inline Editing %} +#SyncfusionAspNetMvcAssistant How do I enable inline editing for CRUD operations in the Grid? +{% endpromptcard %} +{% promptcard Custom Toolbar %} +#SyncfusionAspNetMvcAssistant Add custom toolbar buttons for PDF and Excel export in the Grid. +{% endpromptcard %} +{% promptcard Dynamic Column Configuration %} +#SyncfusionAspNetMvcAssistant How can I dynamically configure multicolumn layout with filtering and sorting? +{% endpromptcard %} +{% endpromptcards %} + +### Chart + +The Syncfusion ASP.NET MVC Chart suite offers versatile visualization tools across various series types for insightful data representation. + +{% promptcards %} +{% promptcard Local and Remote Data %} +#SyncfusionAspNetMvcAssistant How do I bind both local and remote data sources to a Syncfusion Chart? +{% endpromptcard %} +{% promptcard Range Selection %} +#SyncfusionAspNetMvcAssistant Show me how to enable range selection in a Syncfusion ASP.NET MVC Chart. +{% endpromptcard %} +{% promptcard Chart Types Overview %} +#SyncfusionAspNetMvcAssistant What chart types are available in Syncfusion ASP.NET MVC Chart and how to configure them? +{% endpromptcard %} +{% promptcard Markers and Data Labels %} +#SyncfusionAspNetMvcAssistant How can I display markers and data labels on a line chart? +{% endpromptcard %} +{% promptcard Annotations %} +#SyncfusionAspNetMvcAssistant Add custom annotations to highlight specific data points in a chart. +{% endpromptcard %} +{% promptcard Chart Export to Image or PDF %} +#SyncfusionAspNetMvcAssistant How do I export a Syncfusion Chart to PDF or image format? +{% endpromptcard %} +{% promptcard Print Support %} +#SyncfusionAspNetMvcAssistant Enable print functionality for a Syncfusion ASP.NET MVC Chart component. +{% endpromptcard %} +{% promptcard Dynamic Chart with Remote Data %} +#SyncfusionAspNetMvcAssistant Create a chart that updates dynamically with remote API data. +{% endpromptcard %} +{% promptcard Multiple Series Types %} +#SyncfusionAspNetMvcAssistant How do I combine bar and line chart types in a single Syncfusion Chart? +{% endpromptcard %} +{% promptcard Troubleshooting Chart Data Binding %} +#SyncfusionAspNetMvcAssistant Why isn’t my remote data showing up in the Syncfusion Chart? +{% endpromptcard %} +{% promptcard Interactive Range Selector %} +#SyncfusionAspNetMvcAssistant Configure a range selector for zooming and filtering in a time-series chart. +{% endpromptcard %} +{% promptcard Custom Markers and Labels %} +#SyncfusionAspNetMvcAssistant Show me an example of customizing chart markers and data label styles. +{% endpromptcard %} +{% endpromptcards %} + +### Schedule + +The Syncfusion ASP.NET MVC Schedule component helps manage events, resources, and timelines with powerful views and customization. + +{% promptcards %} +{% promptcard Remote Data Binding %} +#SyncfusionAspNetMvcAssistant Bind the Schedule component to a remote API for dynamic event loading. +{% endpromptcard %} +{% promptcard CRUD Actions %} +#SyncfusionAspNetMvcAssistant Show me how to implement full CRUD operations in the Schedule component. +{% endpromptcard %} +{% promptcard Virtual Scrolling %} +#SyncfusionAspNetMvcAssistant Enable virtual scrolling for large event datasets in the Schedule view. +{% endpromptcard %} +{% promptcard Timezone Support %} +#SyncfusionAspNetMvcAssistant How can I configure timezone support in the Syncfusion ASP.NET MVC Schedule? +{% endpromptcard %} +{% promptcard Export Schedule to PDF or Excel %} +#SyncfusionAspNetMvcAssistant Add export functionality to download the Schedule view as PDF or Excel. +{% endpromptcard %} +{% promptcard Timeline Header Rows %} +#SyncfusionAspNetMvcAssistant How do I customize timeline header rows in the Schedule component? +{% endpromptcard %} +{% promptcard Troubleshooting Schedule CRUD %} +#SyncfusionAspNetMvcAssistant Why aren’t my CRUD actions working correctly in the Schedule component? +{% endpromptcard %} +{% promptcard Local and Remote Data %} +#SyncfusionAspNetMvcAssistant Bind both local and remote event data to the Schedule component. +{% endpromptcard %} +{% promptcard Export and Timezone %} +#SyncfusionAspNetMvcAssistant Configure timezone-aware exporting for the Schedule view. +{% endpromptcard %} +{% endpromptcards %} + +### Kanban + +The Syncfusion ASP.NET MVC Kanban organizes tasks in columns with drag-and-drop, swimlanes, and templating for agile workflows. + +{% promptcards %} +{% promptcard Data Binding %} +#SyncfusionAspNetMvcAssistant How do I bind local or remote data to the Syncfusion ASP.NET MVC Kanban board? +{% endpromptcard %} +{% promptcard Sorting %} +#SyncfusionAspNetMvcAssistant Enable sorting of cards within columns in the Kanban component. +{% endpromptcard %} +{% promptcard Swimlane View %} +#SyncfusionAspNetMvcAssistant Show me how to group Kanban cards using swimlane headers. +{% endpromptcard %} +{% promptcard Kanban Card Editing %} +#SyncfusionAspNetMvcAssistant How can I enable inline editing of Kanban cards? +{% endpromptcard %} +{% promptcard Virtualization %} +#SyncfusionAspNetMvcAssistant Configure virtualization for performance with large Kanban datasets. +{% endpromptcard %} +{% promptcard Localization %} +#SyncfusionAspNetMvcAssistant How do I localize labels and messages in the Kanban component? +{% endpromptcard %} +{% promptcard Drag and Drop %} +#SyncfusionAspNetMvcAssistant Enable drag-and-drop functionality for moving cards between columns. +{% endpromptcard %} +{% promptcard Sorting and Swimlane %} +#SyncfusionAspNetMvcAssistant Create a Kanban board with swimlane grouping and sortable cards. +{% endpromptcard %} +{% promptcard Editable Cards and Localization %} +#SyncfusionAspNetMvcAssistant Show me how to edit cards and apply localization in Kanban. +{% endpromptcard %} +{% promptcard Troubleshooting Kanban Drag and Drop %} +#SyncfusionAspNetMvcAssistant Why isn’t drag-and-drop working correctly in my Kanban board? +{% endpromptcard %} +{% promptcard Remote Data and Virtualization %} +#SyncfusionAspNetMvcAssistant Bind remote data to Kanban and enable virtualization for performance. +{% endpromptcard %} +{% promptcard Advanced Kanban Setup %} +#SyncfusionAspNetMvcAssistant Create a Kanban board with data binding, swimlane, card editing, and drag-and-drop. +{% endpromptcard %} +{% endpromptcards %} + +### RichTextEditor + +The Syncfusion ASP.NET MVC RichTextEditor offers a modern WYSIWYG editor with extensive formatting, media, and integration features. + +{% promptcards %} +{% promptcard Toolbar Configuration %} +#SyncfusionAspNetMvcAssistant How do I customize the toolbar options in the Syncfusion RichTextEditor? +{% endpromptcard %} +{% promptcard Link Manipulation %} +#SyncfusionAspNetMvcAssistant Show me how to add, edit, and remove hyperlinks in RichTextEditor content. +{% endpromptcard %} +{% promptcard Iframe Mode %} +#SyncfusionAspNetMvcAssistant How can I render the RichTextEditor inside an iframe for isolated styling? +{% endpromptcard %} +{% promptcard Undo and Redo %} +#SyncfusionAspNetMvcAssistant Enable undo and redo functionality in the RichTextEditor toolbar. +{% endpromptcard %} +{% promptcard Forms Integration %} +#SyncfusionAspNetMvcAssistant How do I integrate a ASP.NET MVC form and validate input? +{% endpromptcard %} +{% promptcard Content Import and Export %} +#SyncfusionAspNetMvcAssistant Export RichTextEditor content to HTML or import existing HTML content. +{% endpromptcard %} +{% promptcard Advanced Toolbar %} +#SyncfusionAspNetMvcAssistant Create a RichTextEditor with toolbar options for formatting, links, and undo/redo. +{% endpromptcard %} +{% promptcard Iframe and Forms Support %} +#SyncfusionAspNetMvcAssistant Use RichTextEditor in iframe mode and bind it to a form for submission. +{% endpromptcard %} +{% promptcard Undo/Redo and Export %} +#SyncfusionAspNetMvcAssistant Enable undo/redo and export content to HTML in RichTextEditor. +{% endpromptcard %} +{% endpromptcards %} + +### Calendar + +The Syncfusion ASP.NET MVC Calendar supports flexible date selection, localization, and custom rendering. + +{% promptcards %} +{% promptcard Date Range Selection %} +#SyncfusionAspNetMvcAssistant How do I enable date range selection in the Syncfusion ASP.NET MVC Calendar? +{% endpromptcard %} +{% promptcard Globalization Support %} +#SyncfusionAspNetMvcAssistant Configure the Calendar to support multiple cultures and languages. +{% endpromptcard %} +{% promptcard Multi-Date Selection %} +#SyncfusionAspNetMvcAssistant Show me how to allow users to select multiple dates in the Calendar. +{% endpromptcard %} +{% promptcard Islamic Calendar Support %} +#SyncfusionAspNetMvcAssistant How can I switch the Calendar to use the Islamic calendar system? +{% endpromptcard %} +{% promptcard Skip Months Feature %} +#SyncfusionAspNetMvcAssistant Enable skipping months in the Calendar navigation for faster browsing. +{% endpromptcard %} +{% promptcard Calendar Showing Other Month Days %} +#SyncfusionAspNetMvcAssistant How do I show days from adjacent months in the current Calendar view? +{% endpromptcard %} +{% promptcard Custom Day Cell Format %} +#SyncfusionAspNetMvcAssistant Customize the day cell format in the Calendar to show short weekday names. +{% endpromptcard %} +{% promptcard Calendar Highlighting Weekends %} +#SyncfusionAspNetMvcAssistant Highlight weekends in the Calendar with a different background color. +{% endpromptcard %} +{% promptcard Globalization and Islamic Calendar %} +#SyncfusionAspNetMvcAssistant Configure the Calendar for Arabic culture using Islamic calendar and localization. +{% endpromptcard %} +{% promptcard Multi-Selection and Range %} +#SyncfusionAspNetMvcAssistant Enable both multi-date selection and range selection in the Calendar. +{% endpromptcard %} +{% promptcard Troubleshooting Calendar Date Range %} +#SyncfusionAspNetMvcAssistant Why isn’t my Calendar selecting the correct date range? +{% endpromptcard %} +{% promptcard Advanced Calendar Setup %} +#SyncfusionAspNetMvcAssistant Create a Calendar with date range, multi-selection, globalization, and weekend highlights. +{% endpromptcard %} +{% endpromptcards %} + +## See also + +* [AI Coding Assistant Overview](https://ej2.syncfusion.com/aspnetmvc/documentation/ai-coding-assistant/overview) +* [SyncfusionAspNetMvcAssistant MCP Server](https://ej2.syncfusion.com/aspnetmvc/documentation/ai-coding-assistant/mcp-server) diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/ai-coding-assistant/prompt-library.md b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/ai-coding-assistant/prompt-library.md new file mode 100644 index 0000000000..efea4fbb57 --- /dev/null +++ b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/ai-coding-assistant/prompt-library.md @@ -0,0 +1,270 @@ +--- +layout: post +title: Syncfusion AI Coding Assistant Prompt Library | Syncfusion +description: Explore the AI Coding Assistant Prompt Library to enhance ASP.NET Core development productivity with code generation, configuration example, contextual guidance +control: Syncfusion AI Coding Assistant Prompt Library +platform: ej2-asp-core-mvc +documentation: ug +domainurl: ##DomainURL## +--- + +# Prompt Library - AI Coding Assistant + +Speed up your A 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 #SyncfusionAspNetCoreAssistant 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 ASP.NET Core Data Grid delivers fast, flexible tables for large datasets with built-in interactivity. + +{% promptcards %} +{% promptcard Paging and Sorting %} +#SyncfusionAspNetCoreAssistant How do I enable paging and sorting in the Syncfusion ASP.NET Core Grid? +{% endpromptcard %} +{% promptcard Grouping and Filtering %} +#SyncfusionAspNetCoreAssistant Show me an example of grouping and filtering data in the Grid component. +{% endpromptcard %} +{% promptcard CRUD Operations %} +#SyncfusionAspNetCoreAssistant What’s the code to implement full CRUD operations in Syncfusion ASP.NET Core Grid? +{% endpromptcard %} +{% promptcard Grid Export to PDF and Excel %} +#SyncfusionAspNetCoreAssistant How can I add PDF and Excel export options to the Grid toolbar? +{% endpromptcard %} +{% promptcard Virtual Scrolling %} +#SyncfusionAspNetCoreAssistant How do I configure virtual scrolling for large datasets in the Grid? +{% endpromptcard %} +{% promptcard Multicolumn Grid Setup %} +#SyncfusionAspNetCoreAssistant Create a multicolumn Grid to display product details with sorting and filtering. +{% endpromptcard %} +{% promptcard Chat Integration %} +#SyncfusionAspNetCoreAssistant How can I integrate a chat widget inside each row of the Syncfusion Grid? +{% endpromptcard %} +{% promptcard Advanced Grid Features %} +#SyncfusionAspNetCoreAssistant Show me a Grid with paging, sorting, grouping, filtering, and virtual scrolling +{% endpromptcard %} +{% promptcard Troubleshooting Grid Export %} +#SyncfusionAspNetCoreAssistant Why isn’t my Grid exporting to PDF and Excel correctly? +{% endpromptcard %} +{% promptcard Inline Editing %} +#SyncfusionAspNetCoreAssistant How do I enable inline editing for CRUD operations in the Grid? +{% endpromptcard %} +{% promptcard Custom Toolbar %} +#SyncfusionAspNetCoreAssistant Add custom toolbar buttons for PDF and Excel export in the Grid. +{% endpromptcard %} +{% promptcard Dynamic Column Configuration %} +#SyncfusionAspNetCoreAssistant How can I dynamically configure multicolumn layout with filtering and sorting? +{% endpromptcard %} +{% endpromptcards %} + +### Chart + +The Syncfusion ASP.NET Core Chart suite offers versatile visualization tools across various series types for insightful data representation. + +{% promptcards %} +{% promptcard Local and Remote Data %} +#SyncfusionAspNetCoreAssistant How do I bind both local and remote data sources to a Syncfusion Chart? +{% endpromptcard %} +{% promptcard Range Selection %} +#SyncfusionAspNetCoreAssistant Show me how to enable range selection in a Syncfusion ASP.NET Core Chart. +{% endpromptcard %} +{% promptcard Chart Types Overview %} +#SyncfusionAspNetCoreAssistant What chart types are available in Syncfusion ASP.NET Core Chart and how to configure them? +{% endpromptcard %} +{% promptcard Markers and Data Labels %} +#SyncfusionAspNetCoreAssistant How can I display markers and data labels on a line chart? +{% endpromptcard %} +{% promptcard Annotations %} +#SyncfusionAspNetCoreAssistant Add custom annotations to highlight specific data points in a chart. +{% endpromptcard %} +{% promptcard Chart Export to Image or PDF %} +#SyncfusionAspNetCoreAssistant How do I export a Syncfusion Chart to PDF or image format? +{% endpromptcard %} +{% promptcard Print Support %} +#SyncfusionAspNetCoreAssistant Enable print functionality for a Syncfusion ASP.NET Core Chart component. +{% endpromptcard %} +{% promptcard Dynamic Chart with Remote Data %} +#SyncfusionAspNetCoreAssistant Create a chart that updates dynamically with remote API data. +{% endpromptcard %} +{% promptcard Multiple Series Types %} +#SyncfusionAspNetCoreAssistant How do I combine bar and line chart types in a single Syncfusion Chart? +{% endpromptcard %} +{% promptcard Troubleshooting Chart Data Binding %} +#SyncfusionAspNetCoreAssistant Why isn’t my remote data showing up in the Syncfusion Chart? +{% endpromptcard %} +{% promptcard Interactive Range Selector %} +#SyncfusionAspNetCoreAssistant Configure a range selector for zooming and filtering in a time-series chart. +{% endpromptcard %} +{% promptcard Custom Markers and Labels %} +#SyncfusionAspNetCoreAssistant Show me an example of customizing chart markers and data label styles. +{% endpromptcard %} +{% endpromptcards %} + +### Schedule + +The Syncfusion ASP.NET Core Schedule component helps manage events, resources, and timelines with powerful views and customization. + +{% promptcards %} +{% promptcard Remote Data Binding %} +#SyncfusionAspNetCoreAssistant Bind the Schedule component to a remote API for dynamic event loading. +{% endpromptcard %} +{% promptcard CRUD Actions %} +#SyncfusionAspNetCoreAssistant Show me how to implement full CRUD operations in the Schedule component. +{% endpromptcard %} +{% promptcard Virtual Scrolling %} +#SyncfusionAspNetCoreAssistant Enable virtual scrolling for large event datasets in the Schedule view. +{% endpromptcard %} +{% promptcard Timezone Support %} +#SyncfusionAspNetCoreAssistant How can I configure timezone support in the Syncfusion ASP.NET Core Schedule? +{% endpromptcard %} +{% promptcard Export Schedule to PDF or Excel %} +#SyncfusionAspNetCoreAssistant Add export functionality to download the Schedule view as PDF or Excel. +{% endpromptcard %} +{% promptcard Timeline Header Rows %} +#SyncfusionAspNetCoreAssistant How do I customize timeline header rows in the Schedule component? +{% endpromptcard %} +{% promptcard Troubleshooting Schedule CRUD %} +#SyncfusionAspNetCoreAssistant Why aren’t my CRUD actions working correctly in the Schedule component? +{% endpromptcard %} +{% promptcard Local and Remote Data %} +#SyncfusionAspNetCoreAssistant Bind both local and remote event data to the Schedule component. +{% endpromptcard %} +{% promptcard Export and Timezone %} +#SyncfusionAspNetCoreAssistant Configure timezone-aware exporting for the Schedule view. +{% endpromptcard %} +{% endpromptcards %} + +### Kanban + +The Syncfusion ASP.NET Core Kanban organizes tasks in columns with drag-and-drop, swimlanes, and templating for agile workflows. + +{% promptcards %} +{% promptcard Data Binding %} +#SyncfusionAspNetCoreAssistant How do I bind local or remote data to the Syncfusion ASP.NET Core Kanban board? +{% endpromptcard %} +{% promptcard Sorting %} +#SyncfusionAspNetCoreAssistant Enable sorting of cards within columns in the Kanban component. +{% endpromptcard %} +{% promptcard Swimlane View %} +#SyncfusionAspNetCoreAssistant Show me how to group Kanban cards using swimlane headers. +{% endpromptcard %} +{% promptcard Kanban Card Editing %} +#SyncfusionAspNetCoreAssistant How can I enable inline editing of Kanban cards? +{% endpromptcard %} +{% promptcard Virtualization %} +#SyncfusionAspNetCoreAssistant Configure virtualization for performance with large Kanban datasets. +{% endpromptcard %} +{% promptcard Localization %} +#SyncfusionAspNetCoreAssistant How do I localize labels and messages in the Kanban component? +{% endpromptcard %} +{% promptcard Drag and Drop %} +#SyncfusionAspNetCoreAssistant Enable drag-and-drop functionality for moving cards between columns. +{% endpromptcard %} +{% promptcard Sorting and Swimlane %} +#SyncfusionAspNetCoreAssistant Create a Kanban board with swimlane grouping and sortable cards. +{% endpromptcard %} +{% promptcard Editable Cards and Localization %} +#SyncfusionAspNetCoreAssistant Show me how to edit cards and apply localization in Kanban. +{% endpromptcard %} +{% promptcard Troubleshooting Kanban Drag and Drop %} +#SyncfusionAspNetCoreAssistant Why isn’t drag-and-drop working correctly in my Kanban board? +{% endpromptcard %} +{% promptcard Remote Data and Virtualization %} +#SyncfusionAspNetCoreAssistant Bind remote data to Kanban and enable virtualization for performance. +{% endpromptcard %} +{% promptcard Advanced Kanban Setup %} +#SyncfusionAspNetCoreAssistant Create a Kanban board with data binding, swimlane, card editing, and drag-and-drop. +{% endpromptcard %} +{% endpromptcards %} + +### RichTextEditor + +The Syncfusion ASP.NET Core RichTextEditor offers a modern WYSIWYG editor with extensive formatting, media, and integration features. + +{% promptcards %} +{% promptcard Toolbar Configuration %} +#SyncfusionAspNetCoreAssistant How do I customize the toolbar options in the Syncfusion RichTextEditor? +{% endpromptcard %} +{% promptcard Link Manipulation %} +#SyncfusionAspNetCoreAssistant Show me how to add, edit, and remove hyperlinks in RichTextEditor content. +{% endpromptcard %} +{% promptcard Iframe Mode %} +#SyncfusionAspNetCoreAssistant How can I render the RichTextEditor inside an iframe for isolated styling? +{% endpromptcard %} +{% promptcard Undo and Redo %} +#SyncfusionAspNetCoreAssistant Enable undo and redo functionality in the RichTextEditor toolbar. +{% endpromptcard %} +{% promptcard Forms Integration %} +#SyncfusionAspNetCoreAssistant How do I integrate a ASP.NET Core form and validate input? +{% endpromptcard %} +{% promptcard Content Import and Export %} +#SyncfusionAspNetCoreAssistant Export RichTextEditor content to HTML or import existing HTML content. +{% endpromptcard %} +{% promptcard Advanced Toolbar %} +#SyncfusionAspNetCoreAssistant Create a RichTextEditor with toolbar options for formatting, links, and undo/redo. +{% endpromptcard %} +{% promptcard Iframe and Forms Support %} +#SyncfusionAspNetCoreAssistant Use RichTextEditor in iframe mode and bind it to a form for submission. +{% endpromptcard %} +{% promptcard Undo/Redo and Export %} +#SyncfusionAspNetCoreAssistant Enable undo/redo and export content to HTML in RichTextEditor. +{% endpromptcard %} +{% endpromptcards %} + +### Calendar + +The Syncfusion ASP.NET Core Calendar supports flexible date selection, localization, and custom rendering. + +{% promptcards %} +{% promptcard Date Range Selection %} +#SyncfusionAspNetCoreAssistant How do I enable date range selection in the Syncfusion ASP.NET Core Calendar? +{% endpromptcard %} +{% promptcard Globalization Support %} +#SyncfusionAspNetCoreAssistant Configure the Calendar to support multiple cultures and languages. +{% endpromptcard %} +{% promptcard Multi-Date Selection %} +#SyncfusionAspNetCoreAssistant Show me how to allow users to select multiple dates in the Calendar. +{% endpromptcard %} +{% promptcard Islamic Calendar Support %} +#SyncfusionAspNetCoreAssistant How can I switch the Calendar to use the Islamic calendar system? +{% endpromptcard %} +{% promptcard Skip Months Feature %} +#SyncfusionAspNetCoreAssistant Enable skipping months in the Calendar navigation for faster browsing. +{% endpromptcard %} +{% promptcard Calendar Showing Other Month Days %} +#SyncfusionAspNetCoreAssistant How do I show days from adjacent months in the current Calendar view? +{% endpromptcard %} +{% promptcard Custom Day Cell Format %} +#SyncfusionAspNetCoreAssistant Customize the day cell format in the Calendar to show short weekday names. +{% endpromptcard %} +{% promptcard Calendar Highlighting Weekends %} +#SyncfusionAspNetCoreAssistant Highlight weekends in the Calendar with a different background color. +{% endpromptcard %} +{% promptcard Globalization and Islamic Calendar %} +#SyncfusionAspNetCoreAssistant Configure the Calendar for Arabic culture using Islamic calendar and localization. +{% endpromptcard %} +{% promptcard Multi-Selection and Range %} +#SyncfusionAspNetCoreAssistant Enable both multi-date selection and range selection in the Calendar. +{% endpromptcard %} +{% promptcard Troubleshooting Calendar Date Range %} +#SyncfusionAspNetCoreAssistant Why isn’t my Calendar selecting the correct date range? +{% endpromptcard %} +{% promptcard Advanced Calendar Setup %} +#SyncfusionAspNetCoreAssistant Create a Calendar with date range, multi-selection, globalization, and weekend highlights. +{% endpromptcard %} +{% endpromptcards %} + +## See also + +* [AI Coding Assistant Overview](https://ej2.syncfusion.com/aspnetcore/documentation/ai-coding-assistant/overview) +* [SyncfusionAspNetCoreAssistant MCP Server](https://ej2.syncfusion.com/aspnetcore/documentation/ai-coding-assistant/mcp-server) diff --git a/ej2-asp-core-mvc/Release-notes/32.1.19.md b/ej2-asp-core-mvc/Release-notes/32.1.19.md new file mode 100644 index 0000000000..42c3aaaa48 --- /dev/null +++ b/ej2-asp-core-mvc/Release-notes/32.1.19.md @@ -0,0 +1,98 @@ +--- +title: Essential Studio for ##Platform_Name## Release Notes +description: Learn here about the controls in the Essential Studio for ##Platform_Name## 2025 Volume 4 Main Release - Release Notes +platform: ej2-asp-core-mvc +documentation: ug +--- + +# Essential Studio for ##Platform_Name## - v32.1.19 Release Notes + +{% include release-info.html date="December 15, 2025" version="v32.1.19" passed="68209" failed="0" %} + +{% directory path: _includes/release-notes/v32.1.19 %} + +{% include {{file.url}} %} + +{% enddirectory %} + +## Test Results + +| Component Name | Test Cases | Passed | Failed | Remarks | +|---------------|------------|--------|--------|---------| +| 3D Chart | 232 | 232 | 0 | All Passed | +| 3D Circular Chart | 374 | 374 | 0 | All Passed | +| Accordion | 208 | 208 | 0 | All Passed | +| AI Assist View | 432 | 432 | 0 | All Passed | +| App Bar | 67 | 67 | 0 | All Passed | +| AutoComplete | 200 | 200 | 0 | All Passed | +| Breadcrumb | 160 | 160 | 0 | All Passed | +| Bullet Chart | 169 | 169 | 0 | All Passed | +| Button | 145 | 145 | 0 | All Passed | +| ButtonGroup | 120 | 120 | 0 | All Passed | +| calendar | 177 | 177 | 0 | All Passed | +| Carousel | 61 | 61 | 0 | All Passed | +| Chart | 5025 | 5025 | 0 | All Passed | +| Chat UI | 500 | 500 | 0 | All Passed | +| Checkbox | 37 | 37 | 0 | All Passed | +| CircularGauge | 429 | 429 | 0 | All Passed | +| ColorPicker | 130 | 130 | 0 | All Passed | +| Combo Box | 139 | 139 | 0 | All Passed | +| Common | 906 | 906 | 0 | All Passed | +| Context Menu | 105 | 105 | 0 | All Passed | +| Data Grid | 3697 | 3697 | 0 | All Passed | +| Date Picker | 427 | 427 | 0 | All Passed | +| Date Range Picker | 515 | 515 | 0 | All Passed | +| Date Time Picker | 325 | 325 | 0 | All Passed | +| Diagram | 16255 | 16255 | 0 | All Passed | +| Dialog | 63 | 63 | 0 | All Passed | +| DropDown Button | 132 | 132 | 0 | All Passed | +| Dropdown List | 203 | 203 | 0 | All Passed | +| Dropdown Tree | 104 | 104 | 0 | All Passed | +| File Manager | 2188 | 2188 | 0 | All Passed | +| Floating Action Button | 174 | 174 | 0 | All Passed | +| Gantt | 4368 | 4368 | 0 | All Passed | +| HeatMap Chart | 478 | 478 | 0 | All Passed | +| Image Editor | 1653 | 1653 | 0 | All Passed | +| In-place Editor | 643 | 643 | 0 | All Passed | +| Kanban | 268 | 268 | 0 | All Passed | +| LinearGauge | 426 | 426 | 0 | All Passed | +| Listbox | 115 | 115 | 0 | All Passed | +| ListView | 84 | 84 | 0 | All Passed | +| Maps | 1244 | 1244 | 0 | All Passed | +| Mention | 45 | 45 | 0 | All Passed | +| Menu | 187 | 187 | 0 | All Passed | +| Multicolumn Combo Box | 254 | 254 | 0 | All Passed | +| Multiselect Dropdown | 442 | 442 | 0 | All Passed | +| OTP Input | 240 | 240 | 0 | All Passed | +| Pivot Table | 5348 | 5348 | 0 | All Passed | +| Progress Bar | 83 | 83 | 0 | All Passed | +| Progress Button | 132 | 132 | 0 | All Passed | +| Query Builder | 480 | 480 | 0 | All Passed | +| RadioButton | 45 | 45 | 0 | All Passed | +| RangeNavigator | 140 | 140 | 0 | All Passed | +| Rating | 198 | 198 | 0 | All Passed | +| Ribbon | 625 | 625 | 0 | All Passed | +| Rich Text Editor | 5135 | 5135 | 0 | All Passed | +| schedule | 4645 | 4645 | 0 | All Passed | +| sidebar | 88 | 88 | 0 | All Passed | +| Signature | 105 | 105 | 0 | All Passed | +| Skeleton | 144 | 144 | 0 | All Passed | +| Slider | 147 | 147 | 0 | All Passed | +| SmithChart | 49 | 49 | 0 | All Passed | +| Sparkline | 57 | 57 | 0 | All Passed | +| Speech To Text | 200 | 200 | 0 | All Passed | +| Speed Dial | 366 | 366 | 0 | All Passed | +| Split Button | 144 | 144 | 0 | All Passed | +| Stepper | 91 | 91 | 0 | All Passed | +| Stock Chart | 379 | 379 | 0 | All Passed | +| Tab | 69 | 69 | 0 | All Passed | +| Text Area | 107 | 107 | 0 | All Passed | +| TextBox | 58 | 58 | 0 | All Passed | +| Time Picker | 180 | 180 | 0 | All Passed | +| Timeline | 213 | 213 | 0 | All Passed | +| Toast | 139 | 139 | 0 | All Passed | +| Toolbar | 135 | 135 | 0 | All Passed | +| ToolTip | 136 | 136 | 0 | All Passed | +| TreeGrid | 3791 | 3791 | 0 | All Passed | +| Treemap | 264 | 264 | 0 | All Passed | +| Treeview | 370 | 370 | 0 | All Passed | \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/hierarchy-grid/detail-row-events/html.cs b/ej2-asp-core-mvc/code-snippet/grid/hierarchy-grid/detail-row-events/html.cs new file mode 100644 index 0000000000..99977ea8ca --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/hierarchy-grid/detail-row-events/html.cs @@ -0,0 +1,6 @@ +public IActionResult Index() +{ + ViewBag.DataSource = OrderDetails.GetAllRecords(); + ViewBag.EmployeeDataSource = EmployeeDetails.GetAllRecords(); + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/hierarchy-grid/detail-row-events/razor b/ej2-asp-core-mvc/code-snippet/grid/hierarchy-grid/detail-row-events/razor new file mode 100644 index 0000000000..8a69cfbafc --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/hierarchy-grid/detail-row-events/razor @@ -0,0 +1,38 @@ +@{ + var ChildGrid = new Syncfusion.EJ2.Grids.Grid() + { + DataSource = (IEnumerable)ViewBag.DataSource, + QueryString = "EmployeeID", + Columns = new List { + new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderID", HeaderText="Order ID", Width="120" }, + new Syncfusion.EJ2.Grids.GridColumn(){ Field="CustomerID", HeaderText="Customer ID", Width="150" }, + new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCity", HeaderText="Ship City", Width="120" }, + new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipName", HeaderText="Ship Name", Width="150" }, + }, + }; +} + +
+ @Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.EmployeeDataSource).Columns(col => + { + col.Field("EmployeeID").HeaderText("Employee ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("FirstName").HeaderText("Name").Width("150").Add(); + col.Field("City").HeaderText("City").Width("150").Add(); + col.Field("Country").HeaderText("Country").Width("150").Add(); + }).ChildGrid(ChildGrid).DetailExpand("detailExpand").DetailCollapse("detailCollapse").Render() + + + diff --git a/ej2-asp-core-mvc/code-snippet/grid/hierarchy-grid/detail-row-events/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/hierarchy-grid/detail-row-events/tagHelper new file mode 100644 index 0000000000..d92f776a08 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/hierarchy-grid/detail-row-events/tagHelper @@ -0,0 +1,40 @@ +@{ + ViewData["Title"] = "Home page"; + var ChildGrid = new Syncfusion.EJ2.Grids.Grid() + { + DataSource = ViewBag.DataSource, + QueryString = "EmployeeID", + Columns = new List { + new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderID", HeaderText="Order ID", Width="120" }, + new Syncfusion.EJ2.Grids.GridColumn(){ Field="CustomerID", HeaderText="Customer ID", Width="150" }, + new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCity", HeaderText="Ship City", Width="120" }, + new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipName", HeaderText="Ship Name", Width="150" }, + }, + }; +} + +
+ + + + + + + + +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/grid/selection/prevent-checkbox-selection/checkbox.cs b/ej2-asp-core-mvc/code-snippet/grid/selection/prevent-checkbox-selection/checkbox.cs new file mode 100644 index 0000000000..63e5ad554e --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/selection/prevent-checkbox-selection/checkbox.cs @@ -0,0 +1,5 @@ +public IActionResult Index() +{ + ViewBag.dataSource = OrderDetails.GetAllRecords(); + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/selection/prevent-checkbox-selection/razor b/ej2-asp-core-mvc/code-snippet/grid/selection/prevent-checkbox-selection/razor new file mode 100644 index 0000000000..d7563df6e6 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/selection/prevent-checkbox-selection/razor @@ -0,0 +1,16 @@ +Html.EJS().Grid("grid").DataSource((IEnumerable)ViewBag.dataSource).Columns(col => +{ + col.Type("checkbox").Width("40").Add(); + col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("110").ValidationRules(new { required = true }).Add(); + col.Field("CustomerName").HeaderText("Customer Name").Width("120").ValidationRules(new { required = true }).Add(); + col.Field("Product").HeaderText("Product").Width("110").EditType("dropdownedit").Add(); + col.Field("Amount").HeaderText("Amount").Width("110").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).ValidationRules(new { required = true }).Add(); + col.Field("OrderDate").HeaderText("Order Date").Width("110").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).EditType("datepickeredit").Format("yMd").Add(); + col.Field("Status").HeaderText("Status").Width("110").EditType("dropdownedit").Add(); +}).AllowPaging().AllowSorting().AllowFiltering().Toolbar(new List() { "Edit", "Update", "Cancel" }).FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel)).EditSettings(edit => {edit.AllowEditing(true).AllowAdding(false).AllowDeleting(false).Mode(Syncfusion.EJ2.Grids.EditMode.Normal);}).SelectionSettings(select => select.PersistSelection(true)).IsRowSelectable("isRowSelectable").Render() + + diff --git a/ej2-asp-core-mvc/code-snippet/grid/selection/prevent-checkbox-selection/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/selection/prevent-checkbox-selection/tagHelper new file mode 100644 index 0000000000..5ddd48af3a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/selection/prevent-checkbox-selection/tagHelper @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + diff --git a/ej2-asp-core-mvc/code-snippet/image-editor/how-to/clear-image/razor b/ej2-asp-core-mvc/code-snippet/image-editor/how-to/clear-image/razor index 5f849b8f2f..1a2ebff96d 100644 --- a/ej2-asp-core-mvc/code-snippet/image-editor/how-to/clear-image/razor +++ b/ej2-asp-core-mvc/code-snippet/image-editor/how-to/clear-image/razor @@ -4,7 +4,6 @@ @Html.EJS().Button("clearImage").CssClass("e-primary").Content("Clear Image").Click("clearImage").Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/image-editor/how-to/fit-to-width-and-height/tagHelper b/ej2-asp-core-mvc/code-snippet/image-editor/how-to/fit-to-width-and-height/tagHelper new file mode 100644 index 0000000000..71c011a76d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/image-editor/how-to/fit-to-width-and-height/tagHelper @@ -0,0 +1,64 @@ +
+ +
+ + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup-customize/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup-customize/controller.cs new file mode 100644 index 0000000000..e1cd786115 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup-customize/controller.cs @@ -0,0 +1,9 @@ + public class HomeController : Controller + { + + public ActionResult Index() + { + return View(); + } + + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup-customize/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup-customize/razor new file mode 100644 index 0000000000..2dd9d003c5 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup-customize/razor @@ -0,0 +1,10 @@ +@Html.EJS().RichTextEditor("clipboardCleanup").BeforeClipboardWrite("beforeClipboardWrite").Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup-customize/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup-customize/tagHelper new file mode 100644 index 0000000000..ecfb44b209 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup-customize/tagHelper @@ -0,0 +1,10 @@ + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup/controller.cs new file mode 100644 index 0000000000..e1cd786115 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup/controller.cs @@ -0,0 +1,9 @@ + public class HomeController : Controller + { + + public ActionResult Index() + { + return View(); + } + + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup/razor new file mode 100644 index 0000000000..e37d66fec9 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup/razor @@ -0,0 +1,2 @@ + +@Html.EJS().RichTextEditor("clipboardCleanup").Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup/tagHelper new file mode 100644 index 0000000000..fc14abcee9 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup/tagHelper @@ -0,0 +1 @@ + diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/controller.cs new file mode 100644 index 0000000000..8c55172c87 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/controller.cs @@ -0,0 +1,52 @@ +public class HomeController : Controller +{ + public ActionResult Index() + { + ViewBag.value = @"

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:

  • 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.

"; + object size1 = new + { + text = "1", + value = "1" + }; + object size2 = new + { + text = "1.15", + value = "1.15" + }; + object size3 = new + { + text = "1.5", + value = "1.5" + }; + object size4 = new + { + text = "2", + value = "2" + }; + object size5 = new + { + text = "2.5", + value = "2.5" + }; + object size6 = new + { + text = "3", + value = "3" + }; + object size6 = new + { + text = "3.5", + value = "3.5" + }; + object size7 = new + { + text = "4", + value = "4" + }; + + ViewBag.items = new[] { "LineHeight" }; + ViewBag.LineHeightItems = new[] { size1, size2, size3, size4, size5 }; + return View(); + } + +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/razor new file mode 100644 index 0000000000..d7e149e361 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/razor @@ -0,0 +1 @@ +@Html.EJS().RichTextEditor("custom-line-height").ToolbarSettings(e => e.Items((object)ViewBag.items)).LineHeight(t => t.Default("2").SupportAllValues(true).Items(ViewBag.LineHeightItems)).Value(ViewBag.value).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/tagHelper new file mode 100644 index 0000000000..9fdf2181ed --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/tagHelper @@ -0,0 +1,5 @@ + + + + + diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/controller.cs new file mode 100644 index 0000000000..e2dcb066b6 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/controller.cs @@ -0,0 +1,9 @@ +public class HomeController : Controller +{ + public ActionResult Index() + { + ViewBag.value = @"

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:

  • 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.

"; + ViewBag.items = new[] { "LineHeight" }; + return View(); + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/razor new file mode 100644 index 0000000000..3308b4b9dc --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/razor @@ -0,0 +1 @@ +@Html.EJS().RichTextEditor("line-height").ToolbarSettings(e => e.Items((object)ViewBag.items)).Value(ViewBag.value).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/tagHelper new file mode 100644 index 0000000000..d7e65a060b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/tagHelper @@ -0,0 +1,3 @@ + + + diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/razor index 3e1507e478..3f6f6fd573 100644 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/razor +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/razor @@ -1,6 +1,6 @@ - {% raw %} @using Syncfusion.EJ2.DropDowns + @{ string rteValue = @"

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

@@ -10,7 +10,7 @@

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

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

Best regards,
The {{CompanyName}} Team

"; - char mentionChar = '{'; + char mentionChar = '{{'; var tools = new object[] { "Bold", @@ -68,6 +68,8 @@ + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/secureexport/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/secureexport/tagHelper new file mode 100644 index 0000000000..4df1ad2062 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/secureexport/tagHelper @@ -0,0 +1,51 @@ +@{ + string rteValue = "

Invitation to Microsoft Webinar Meet-Up

Dear Guest,

We're thrilled to extend a special invitation to you for an exclusive Microsoft webinar meet-up, where we'll explore the latest innovations and insights driving the future of technology. As a valued member of our community, we believe this event will offer invaluable knowledge and networking opportunities.

Event Details:

Time: 10:00 AM - 12:00 PM
Duration: 2 hours
Platform: Microsoft Teams


Agenda:

  • Introduction to Cutting-Edge Microsoft Technologies
  • Deep Dive into AI in Business: Leveraging Microsoft Azure Solutions
  • Live Q&A Session with Industry Experts
  • Networking Opportunities with Peers and Professionals

Why Attend?

  • Gain insights into the latest trends and advancements in technology.
  • Interact with industry experts and expand your professional network.
  • Get your questions answered in real-time during the live Q&A session.
  • Access exclusive resources and offers available only to webinar attendees.

Feel free to invite your colleagues and peers who might benefit from this enriching experience. Simply forward this email to them or share the event details.

We're looking forward to your participation and to exploring the exciting world of Microsoft technology together. Should you have any questions or require further information, please don't hesitate to contact us at webinar@company.com.


Warm regards,

John Doe
Event Coordinator
ABC Company

"; + object[] tools = new object[] {"Undo", "Redo", "|", "ExportWord", "ExportPdf", "|", "Bold", "Italic", "Underline", "StrikeThrough", "|", + "FontName", "FontSize", "FontColor", "BackgroundColor", "|", + "Formats", "Alignments", "Blockquote", "|", "NumberFormatList", + "BulletFormatList", "|", "CreateLink", "Image", "CreateTable", "|", "ClearFormat", "SourceCode" }; + string hostUrl = "https://services.syncfusion.com/aspnet/production/"; + RichTextEditorExportWord ExportWord = new RichTextEditorExportWord + { + ServiceUrl = hostUrl + "api/RichTextEditor/ExportToDocx", + FileName = "RichTextEditor.docx", + Stylesheet = ".e-rte-content{ font-size: 1em; font-weight: 400; margin: 0; }" + }; + + RichTextEditorExportPdf ExportPdf = new RichTextEditorExportPdf + { + ServiceUrl = hostUrl + "api/RichTextEditor/ExportToPdf", + FileName = "RichTextEditor.pdf", + Stylesheet = ".e-rte-content{ font-size: 1em; font-weight: 400; margin: 0; }" + }; + RichTextEditorImageSettings InsertImageSettings = new RichTextEditorImageSettings + { + SaveUrl = hostUrl + "api/RichTextEditor/SaveFile", + RemoveUrl = hostUrl + "api/RichTextEditor/DeleteFile", + Path = hostUrl + "RichTextEditor/" + }; +} + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/secureimport/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/secureimport/controller.cs new file mode 100644 index 0000000000..4711913fa9 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/secureimport/controller.cs @@ -0,0 +1,25 @@ +public class HomeController : Controller +{ + + public ActionResult Index() + { + ViewBag.RTEValue = "

Invitation to Microsoft Webinar Meet-Up

Dear Guest,

We're thrilled to extend a special invitation to you for an exclusive Microsoft webinar meet-up, where we'll explore the latest innovations and insights driving the future of technology. As a valued member of our community, we believe this event will offer invaluable knowledge and networking opportunities.

Event Details:

Time: 10:00 AM - 12:00 PM
Duration: 2 hours
Platform: Microsoft Teams


Agenda:

  • Introduction to Cutting-Edge Microsoft Technologies
  • Deep Dive into AI in Business: Leveraging Microsoft Azure Solutions
  • Live Q&A Session with Industry Experts
  • Networking Opportunities with Peers and Professionals

Why Attend?

  • Gain insights into the latest trends and advancements in technology.
  • Interact with industry experts and expand your professional network.
  • Get your questions answered in real-time during the live Q&A session.
  • Access exclusive resources and offers available only to webinar attendees.

Feel free to invite your colleagues and peers who might benefit from this enriching experience. Simply forward this email to them or share the event details.

We're looking forward to your participation and to exploring the exciting world of Microsoft technology together. Should you have any questions or require further information, please don't hesitate to contact us at webinar@company.com.


Warm regards,

John Doe
Event Coordinator
ABC Company

"; + ViewBag.Tools = new object[] {"Undo", "Redo", "|", "ImportWord", "|", + "Bold", "Italic", "Underline", "StrikeThrough", "|", + "FontName", "FontSize", "FontColor", "BackgroundColor", "|", + "Formats", "Alignments", "Blockquote", "|", "NumberFormatList", "BulletFormatList", + "|", "CreateLink", "Image", "CreateTable", "|", "ClearFormat", "SourceCode"}; + string hostUrl = "https://services.syncfusion.com/aspnet/production/"; + ViewBag.InsertImageSettings = new Syncfusion.EJ2.RichTextEditor.RichTextEditorImageSettings + { + SaveUrl = hostUrl + "api/RichTextEditor/SaveFile", + RemoveUrl = hostUrl + "api/RichTextEditor/DeleteFile", + Path = hostUrl + "RichTextEditor/" + }; + ViewBag.ImportWord = new Syncfusion.EJ2.RichTextEditor.RichTextEditorImportWord + { + ServiceUrl = hostUrl + "api/RichTextEditor/ImportFromWord", + }; + return View(); + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/secureimport/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/secureimport/razor new file mode 100644 index 0000000000..a0b5f3bfcb --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/secureimport/razor @@ -0,0 +1,11 @@ + @Html.EJS().RichTextEditor("importEditor").ToolbarSettings(e => + e.Items((object)ViewBag.Tools)).ImportWord(ViewBag.ImportWord).wordImporting("onWordImport").Value((string)ViewBag.RTEValue).EnableXhtml(true).InsertImageSettings(ViewBag.InsertImageSettings).Render() + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/secureimport/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/secureimport/tagHelper new file mode 100644 index 0000000000..6e949dd2a4 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/secureimport/tagHelper @@ -0,0 +1,40 @@ +@{ + string rteValue = "

Invitation to Microsoft Webinar Meet-Up

Dear Guest,

We're thrilled to extend a special invitation to you for an exclusive Microsoft webinar meet-up, where we'll explore the latest innovations and insights driving the future of technology. As a valued member of our community, we believe this event will offer invaluable knowledge and networking opportunities.

Event Details:

Time: 10:00 AM - 12:00 PM
Duration: 2 hours
Platform: Microsoft Teams


Agenda:

  • Introduction to Cutting-Edge Microsoft Technologies
  • Deep Dive into AI in Business: Leveraging Microsoft Azure Solutions
  • Live Q&A Session with Industry Experts
  • Networking Opportunities with Peers and Professionals

Why Attend?

  • Gain insights into the latest trends and advancements in technology.
  • Interact with industry experts and expand your professional network.
  • Get your questions answered in real-time during the live Q&A session.
  • Access exclusive resources and offers available only to webinar attendees.

Feel free to invite your colleagues and peers who might benefit from this enriching experience. Simply forward this email to them or share the event details.

We're looking forward to your participation and to exploring the exciting world of Microsoft technology together. Should you have any questions or require further information, please don't hesitate to contact us at webinar@company.com.


Warm regards,

John Doe
Event Coordinator
ABC Company

"; + object[] tools = new object[] {"Undo", "Redo", "|", "ImportWord", "|", + "Bold", "Italic", "Underline", "StrikeThrough", "|", + "FontName", "FontSize", "FontColor", "BackgroundColor", "|", + "Formats", "Alignments", "Blockquote", "|", "NumberFormatList", "BulletFormatList", + "|", "CreateLink", "Image", "CreateTable", "|", "ClearFormat", "SourceCode" }; + string hostUrl = "https://services.syncfusion.com/aspnet/production/"; + + RichTextEditorImageSettings InsertImageSettings = new RichTextEditorImageSettings + { + SaveUrl = hostUrl + "api/RichTextEditor/SaveFile", + RemoveUrl = hostUrl + "api/RichTextEditor/DeleteFile", + Path = hostUrl + "RichTextEditor/" + }; + RichTextEditorImportWord ImportWord = new RichTextEditorImportWord + { + ServiceUrl = hostUrl + "api/RichTextEditor/ImportFromWord", + }; +} + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/razor index c40d57d450..e6796db992 100644 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/razor +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/razor @@ -24,22 +24,49 @@ const realLength = panel.firstChild.firstChild.textContent.length; rangeObj.max = realLength; rangeObj.dataBind(); + // Focus the editor to activate selection + panel.focus(); + + // Apply initial selection + onChange({ value: rangeObj.value }); }); }); function onChange(args) { const [start, end] = args.value; const panel = editorObj.contentModule.getEditPanel(); - const textNode = panel.firstChild.firstChild; - const maxLength = textNode.length; + const maxLength = panel.textContent.length; + // Ensure start and end are within valid bounds const safeStart = Math.min(start, maxLength); const safeEnd = Math.min(end, maxLength); - const range = document.createRange(); - range.setStart(textNode, safeStart); - range.setEnd(textNode, safeEnd); - window.getSelection().removeAllRanges(); - window.getSelection().addRange(range); + // Find the text node and relative offset for both start and end + const startInfo = getTextNodeAtOffset(panel, safeStart); + const endInfo = getTextNodeAtOffset(panel, safeEnd); + + if (startInfo && endInfo) { + const range = document.createRange(); + range.setStart(startInfo.node, startInfo.offset); + range.setEnd(endInfo.node, endInfo.offset); + const selection = window.getSelection(); + selection.removeAllRanges(); + selection.addRange(range); + } } + + function getTextNodeAtOffset(root: Node, offset: number): { node: Text; offset: number } | null { + let currentOffset = 0; + const walker: TreeWalker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null, false); + while (walker.nextNode()) { + const node = walker.currentNode as Text; + const nodeLength = node.textContent.length; + if (currentOffset + nodeLength >= offset) { + return { node, offset: offset - currentOffset }; + } + currentOffset += nodeLength; + } + return null; + } + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/tagHelper index 4f7bc3d9cb..1bcbc6eb91 100644 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/tagHelper @@ -30,22 +30,48 @@ var sliderValue = new int[] { 0, 50 }; const realLength = panel.firstChild.firstChild.textContent.length; rangeObj.max = realLength; rangeObj.dataBind(); + // Focus the editor to activate selection + panel.focus(); + + // Apply initial selection + onChange({ value: rangeObj.value }); }); }); function onChange(args) { const [start, end] = args.value; const panel = editorObj.contentModule.getEditPanel(); - const textNode = panel.firstChild.firstChild; - const maxLength = textNode.length; + const maxLength = panel.textContent.length; + // Ensure start and end are within valid bounds const safeStart = Math.min(start, maxLength); const safeEnd = Math.min(end, maxLength); - const range = document.createRange(); - range.setStart(textNode, safeStart); - range.setEnd(textNode, safeEnd); - window.getSelection().removeAllRanges(); - window.getSelection().addRange(range); + // Find the text node and relative offset for both start and end + const startInfo = getTextNodeAtOffset(panel, safeStart); + const endInfo = getTextNodeAtOffset(panel, safeEnd); + + if (startInfo && endInfo) { + const range = document.createRange(); + range.setStart(startInfo.node, startInfo.offset); + range.setEnd(endInfo.node, endInfo.offset); + const selection = window.getSelection(); + selection.removeAllRanges(); + selection.addRange(range); + } + } + + function getTextNodeAtOffset(root: Node, offset: number): { node: Text; offset: number } | null { + let currentOffset = 0; + const walker: TreeWalker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null, false); + while (walker.nextNode()) { + const node = walker.currentNode as Text; + const nodeLength = node.textContent.length; + if (currentOffset + nodeLength >= offset) { + return { node, offset: offset - currentOffset }; + } + currentOffset += nodeLength; + } + return null; } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu copy/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu copy/controller.cs deleted file mode 100644 index e37415605c..0000000000 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu copy/controller.cs +++ /dev/null @@ -1,49 +0,0 @@ -public class HomeController : Controller -{ - public ActionResult Index() - { - ViewBag.items = new[] { "Bold", "Italic", "Underline", "StrikeThrough", "SuperScript", "SubScript", "|", - "FontName", "FontSize", "FontColor", "BackgroundColor", "|", - "LowerCase", "UpperCase", - "Formats", "Alignments", "|", "NumberFormatList", "BulletFormatList", "|", - "Outdent", "Indent", "|", - "CreateLink", "Image", "Video", "Audio", "CreateTable", "|", "FormatPainter", "ClearFormat", "|", "EmojiPicker", "|", - "SourceCode", "|", "Undo", "Redo" }; - ViewBag.SlashMenuSettings = new Syncfusion.EJ2.RichTextEditor.RichTextEditorSlashMenuSettings - { - Enable = true, - Items = new object[] { "Paragraph", "Heading 1", "Heading 2", "Heading 3", "Heading 4", "OrderedList", "UnorderedList", - "CodeBlock", "Blockquote", "Link", "Image", "Video", "Audio", "Table", "Emojipicker", - new { - text= "Meeting notes", - description= "Insert a meeting note template.", - iconCss= "e-icons e-description", - type= "Custom", - command= "MeetingNotes" - }, - new { - text= "Signature", - description= "Insert a signature template.", - iconCss= "e-icons e-signature", - type= "Custom", - command= "Signature" - }, - new { - text: 'HorizontalLine', - description: 'Insert a horizontal line', - iconCss: 'e-icons e-horizontal-line', - type: 'Custom', - command: 'HorizontalLine', - }, - new { - text: 'CheckList', - description: 'Insert a check list', - iconCss: 'e-icons e-checklist', - type: 'Custom', - command: 'CheckList', - }, - } - } - return View(); - } -} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu copy/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu copy/razor deleted file mode 100644 index d04723da1b..0000000000 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu copy/razor +++ /dev/null @@ -1,23 +0,0 @@ -@Html.EJS().RichTextEditor("slashMenu").Placeholder("Type '/' and choose format").Created("created").ToolbarSettings(e => e.Items((object)ViewBag.items)).SlashMenuSettings(ViewBag.SlashMenuSettings).SlashMenuItemSelect("slashMenuItemSelect").Render() - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu copy/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu copy/tagHelper deleted file mode 100644 index eb8a8ae918..0000000000 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu copy/tagHelper +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/tree-grid/selection/partial-selection/partial.cs b/ej2-asp-core-mvc/code-snippet/tree-grid/selection/partial-selection/partial.cs new file mode 100644 index 0000000000..540ea4a393 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/tree-grid/selection/partial-selection/partial.cs @@ -0,0 +1,6 @@ +public IActionResult Index() +{ + var tree = TreeData.GetTaskData(); + ViewBag.datasource = tree; + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/tree-grid/selection/partial-selection/razor b/ej2-asp-core-mvc/code-snippet/tree-grid/selection/partial-selection/razor new file mode 100644 index 0000000000..a9a97a268f --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/tree-grid/selection/partial-selection/razor @@ -0,0 +1,22 @@ +@(Html.EJS().TreeGrid("PartialSelection") + .EnableVirtualization(true) + .DataSource((IEnumerable)ViewBag.datasource) + .AllowSelection() + .SelectionSettings(sel => sel.PersistSelection(true)).IdMapping("TaskID") + .ParentIdMapping("ParentID").TreeColumnIndex(1).IsRowSelectable("isRowSelectable") + .Columns(col => + { + col.Type("checkbox").Width(60).Add(); + col.Field("Task").HeaderText("Task").Width(300).Add(); + col.Field("TaskID").Visible(false).IsPrimaryKey(true).Add(); + col.Field("AssignedTo").HeaderText("Assigned To").Width(140).Add(); + col.Field("StartDate").HeaderText("Start").Format("yMd").Width(180).Add(); + col.Field("DueDate").HeaderText("Due").Format("yMd").Width(180).Add(); + col.Field("Priority").HeaderText("Priority").Width(90).Add(); + col.Field("Progress").HeaderText("Status").Width(90).Add(); + }).Render()) + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/tree-grid/selection/partial-selection/tagHelper b/ej2-asp-core-mvc/code-snippet/tree-grid/selection/partial-selection/tagHelper new file mode 100644 index 0000000000..40b3afd708 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/tree-grid/selection/partial-selection/tagHelper @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/treeview/customization/self-referential/razor b/ej2-asp-core-mvc/code-snippet/treeview/customization/self-referential/razor new file mode 100644 index 0000000000..f0d8163710 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/treeview/customization/self-referential/razor @@ -0,0 +1,12 @@ +@model List + +@Html.EJS().TreeView("listdata").Fields(field=> + field.Id("id").ParentID("pid").Selected("selected"). + Expanded("expanded").Text("name").HasChildren("hasChild").HtmlAttributes("htmlAttributes") + .DataSource(Model)).Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/treeview/customization/self-referential/selfreferential-core.cs b/ej2-asp-core-mvc/code-snippet/treeview/customization/self-referential/selfreferential-core.cs new file mode 100644 index 0000000000..63588978b1 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/treeview/customization/self-referential/selfreferential-core.cs @@ -0,0 +1,161 @@ + public IActionResult LocalData() + { + + List listdata = new List(); + listdata.Add(new + { + id = 1, + name = "Australia", + hasChild = true, + expanded = true + }); + listdata.Add(new + { + id = 2, + pid = 1, + name = "New South Wales", + + }); + listdata.Add(new + { + id = 3, + pid = 1, + name = "Victoria", + HtmlAttributes = new Dictionary + { + { "class", "child-node" } + } + }); + + listdata.Add(new + { + id = 4, + pid = 1, + name = "South Australia" + }); + listdata.Add(new + { + id = 6, + pid = 1, + name = "Western Australia", + + }); + listdata.Add(new + { + id = 7, + name = "Brazil", + hasChild = true + }); + listdata.Add(new + { + id = 8, + pid = 7, + name = "Paraná" + }); + listdata.Add(new + { + id = 9, + pid = 7, + name = "Ceará" + }); + listdata.Add(new + { + id = 10, + pid = 7, + name = "Acre" + }); + listdata.Add(new + { + id = 11, + name = "China", + hasChild = true + }); + listdata.Add(new + { + id = 12, + pid = 11, + name = "Guangzhou" + }); + listdata.Add(new + { + id = 13, + pid = 11, + name = "Shanghai" + }); + listdata.Add(new + { + id = 14, + pid = 11, + name = "Beijing" + }); + listdata.Add(new + { + id = 15, + pid = 11, + name = "Shantou" + + }); + listdata.Add(new + { + id = 16, + name = "France", + hasChild = true + + }); + listdata.Add(new + { + id = 17, + pid = 16, + name = "Pays de la Loire" + + }); + listdata.Add(new + { + id = 18, + pid = 16, + name = "Aquitaine" + + }); + listdata.Add(new + { + id = 19, + pid = 16, + name = "Brittany" + + }); + listdata.Add(new + { + id = 20, + pid = 16, + name = "Lorraine" + }); + listdata.Add(new + { + id = 21, + name = "India", + hasChild = true + + }); + listdata.Add(new + { + id = 22, + pid = 21, + name = "Assam" + + }); + listdata.Add(new + { + id = 23, + pid = 21, + name = "Bihar" + }); + listdata.Add(new + { + id = 24, + pid = 21, + name = "Tamil Nadu" + + }); + ViewBag.dataSource = listdata; + return View(); + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/treeview/customization/self-referential/selfreferential-mvc.cs b/ej2-asp-core-mvc/code-snippet/treeview/customization/self-referential/selfreferential-mvc.cs new file mode 100644 index 0000000000..f4f211dfbe --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/treeview/customization/self-referential/selfreferential-mvc.cs @@ -0,0 +1,164 @@ + using Syncfusion.EJ2.Navigations; + + public IActionResult LocalData() + { + TreeViewFieldsSettings Listdata = new TreeViewFieldsSettings(); + List listdata = new List(); + listdata.Add(new + { + id = 1, + name = "Australia", + hasChild = true, + expanded = true + }); + listdata.Add(new + { + id = 2, + pid = 1, + name = "New South Wales", + + }); + listdata.Add(new + { + id = 3, + pid = 1, + name = "Victoria", + HtmlAttributes = new Dictionary + { + { "class", "child-node" } + } + }); + + listdata.Add(new + { + id = 4, + pid = 1, + name = "South Australia" + }); + listdata.Add(new + { + id = 6, + pid = 1, + name = "Western Australia", + + }); + listdata.Add(new + { + id = 7, + name = "Brazil", + hasChild = true + }); + listdata.Add(new + { + id = 8, + pid = 7, + name = "Paraná" + }); + listdata.Add(new + { + id = 9, + pid = 7, + name = "Ceará" + }); + listdata.Add(new + { + id = 10, + pid = 7, + name = "Acre" + }); + listdata.Add(new + { + id = 11, + name = "China", + hasChild = true + }); + listdata.Add(new + { + id = 12, + pid = 11, + name = "Guangzhou" + }); + listdata.Add(new + { + id = 13, + pid = 11, + name = "Shanghai" + }); + listdata.Add(new + { + id = 14, + pid = 11, + name = "Beijing" + }); + listdata.Add(new + { + id = 15, + pid = 11, + name = "Shantou" + }); + listdata.Add(new + { + id = 16, + name = "France", + hasChild = true + }); + listdata.Add(new + { + id = 17, + pid = 16, + name = "Pays de la Loire" + }); + listdata.Add(new + { + id = 18, + pid = 16, + name = "Aquitaine" + + }); + listdata.Add(new + { + id = 19, + pid = 16, + name = "Brittany" + + }); + listdata.Add(new + { + id = 20, + pid = 16, + name = "Lorraine" + }); + listdata.Add(new + { + id = 21, + name = "India", + hasChild = true + }); + listdata.Add(new + { + id = 22, + pid = 21, + name = "Assam" + + }); + listdata.Add(new + { + id = 23, + pid = 21, + name = "Bihar" + }); + listdata.Add(new + { + id = 24, + pid = 21, + name = "Tamil Nadu" + }); + Listdata.DataSource = listdata; + Listdata.Expanded = "expanded"; + Listdata.Id = "id"; + Listdata.ParentID = "pid"; + Listdata.Text = "name"; + Listdata.HasChildren = "hasChild"; + ViewBag.TreeViewFields = Listdata; + return View(); + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/treeview/customization/self-referential/selfreferential.cs b/ej2-asp-core-mvc/code-snippet/treeview/customization/self-referential/selfreferential.cs new file mode 100644 index 0000000000..63588978b1 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/treeview/customization/self-referential/selfreferential.cs @@ -0,0 +1,161 @@ + public IActionResult LocalData() + { + + List listdata = new List(); + listdata.Add(new + { + id = 1, + name = "Australia", + hasChild = true, + expanded = true + }); + listdata.Add(new + { + id = 2, + pid = 1, + name = "New South Wales", + + }); + listdata.Add(new + { + id = 3, + pid = 1, + name = "Victoria", + HtmlAttributes = new Dictionary + { + { "class", "child-node" } + } + }); + + listdata.Add(new + { + id = 4, + pid = 1, + name = "South Australia" + }); + listdata.Add(new + { + id = 6, + pid = 1, + name = "Western Australia", + + }); + listdata.Add(new + { + id = 7, + name = "Brazil", + hasChild = true + }); + listdata.Add(new + { + id = 8, + pid = 7, + name = "Paraná" + }); + listdata.Add(new + { + id = 9, + pid = 7, + name = "Ceará" + }); + listdata.Add(new + { + id = 10, + pid = 7, + name = "Acre" + }); + listdata.Add(new + { + id = 11, + name = "China", + hasChild = true + }); + listdata.Add(new + { + id = 12, + pid = 11, + name = "Guangzhou" + }); + listdata.Add(new + { + id = 13, + pid = 11, + name = "Shanghai" + }); + listdata.Add(new + { + id = 14, + pid = 11, + name = "Beijing" + }); + listdata.Add(new + { + id = 15, + pid = 11, + name = "Shantou" + + }); + listdata.Add(new + { + id = 16, + name = "France", + hasChild = true + + }); + listdata.Add(new + { + id = 17, + pid = 16, + name = "Pays de la Loire" + + }); + listdata.Add(new + { + id = 18, + pid = 16, + name = "Aquitaine" + + }); + listdata.Add(new + { + id = 19, + pid = 16, + name = "Brittany" + + }); + listdata.Add(new + { + id = 20, + pid = 16, + name = "Lorraine" + }); + listdata.Add(new + { + id = 21, + name = "India", + hasChild = true + + }); + listdata.Add(new + { + id = 22, + pid = 21, + name = "Assam" + + }); + listdata.Add(new + { + id = 23, + pid = 21, + name = "Bihar" + }); + listdata.Add(new + { + id = 24, + pid = 21, + name = "Tamil Nadu" + + }); + ViewBag.dataSource = listdata; + return View(); + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/treeview/customization/self-referential/tagHelper b/ej2-asp-core-mvc/code-snippet/treeview/customization/self-referential/tagHelper new file mode 100644 index 0000000000..9d238a9beb --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/treeview/customization/self-referential/tagHelper @@ -0,0 +1,42 @@ +@{ + ..... + List listdata = new List + { + new { id = 1, name = "Australia", hasChild = true, expanded = true }, + new { id = 2, pid = 1, name = "New South Wales" }, + new { id = 3, pid = 1, name = "Victoria", + htmlAttributes = new Dictionary { + { "class", "child-node" }, + }}, + new { id = 4, pid = 1, name = "South Australia" }, + new { id = 6, pid = 1, name = "Western Australia" }, + new { id = 7, name = "Brazil", hasChild = true }, + new { id = 8, pid = 7, name = "Paraná" }, + new { id = 9, pid = 7, name = "Ceará" }, + new { id = 10, pid = 7, name = "Acre" }, + new { id = 11, name = "China", hasChild = true }, + new { id = 12, pid = 11, name = "Guangzhou" }, + new { id = 13, pid = 11, name = "Shanghai" }, + new { id = 14, pid = 11, name = "Beijing" }, + new { id = 15, pid = 11, name = "Shantou" }, + new { id = 16, name = "France", hasChild = true }, + new { id = 17, pid = 16, name = "Pays de la Loire" }, + new { id = 18, pid = 16, name = "Aquitaine" }, + new { id = 19, pid = 16, name = "Brittany" }, + new { id = 20, pid = 16, name = "Lorraine" }, + new { id = 21, name = "India", hasChild = true }, + new { id = 22, pid = 21, name = "Assam" }, + new { id = 23, pid = 21, name = "Bihar" }, + new { id = 24, pid = 21, name = "Tamil Nadu" } + }; +} + + + + + + diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/hierarchy-grid.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/hierarchy-grid.md index 6d69c45132..aaf217092f 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/hierarchy-grid.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/hierarchy-grid.md @@ -295,6 +295,27 @@ In the demo below, the expand/collapse icons have been changed to arrow-down and ![Customize hierarchy Grid icons](images/hierarchy-grid/change-icon.png) +## 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 cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/hierarchy-grid/detail-row-events/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Html.cs" %} +{% include code-snippet/grid/hierarchy-grid/detail-row-events/html.cs %} +{% endhighlight %} +{% endtabs %} + ## Customize the child grid The Syncfusion® ASP.NET MVC Grid component offers various ways to customize the child grid appearance using both default CSS and custom themes. To access the child grid elements, you can use the **.e-detailcell** class selector, which targets the child grid. diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/row/detail-template.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/row/detail-template.md index 2799002d18..a4088d35d9 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/row/detail-template.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/row/detail-template.md @@ -107,3 +107,6 @@ Detail template is not supported with the following features: * Lazy load grouping * State persistence +## See also + +* [Detail row events](../hierarchy-grid#detail-row-events) \ No newline at end of file diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/selection/check-box-selection.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/selection/check-box-selection.md index eacd5070d8..81e991bc17 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/selection/check-box-selection.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/selection/check-box-selection.md @@ -88,6 +88,23 @@ In the following sample, the selection of specific rows has been prevented based ![Prevent specific rows from being selected in checkbox selection](../images/selection/checkbox-prevent.gif) +## 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 cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/selection/prevent-checkbox-selection/razor %} +{% endhighlight %} +{% highlight c# tabtitle="checkbox.cs" %} +{% include code-snippet/grid/selection/prevent-checkbox-selection/checkbox.cs %} +{% endhighlight %} +{% endtabs %} + ## How to select single row in checkbox selection mode The ASP.NET MVC 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. diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/hierarchy-grid.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/hierarchy-grid.md index 58d5c35b0d..47991aa464 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/hierarchy-grid.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/hierarchy-grid.md @@ -295,6 +295,27 @@ In the demo below, the expand/collapse icons have been changed to arrow-down and ![Customize hierarchy Grid icons](images/hierarchy-grid/change-icon.png) +## 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 cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/hierarchy-grid/detail-row-events/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Html.cs" %} +{% include code-snippet/grid/hierarchy-grid/detail-row-events/html.cs %} +{% endhighlight %} +{% endtabs %} + ## Customize the child grid The Syncfusion® ASP.NET Core Grid component offers various ways to customize the child grid appearance using both default CSS and custom themes. To access the child grid elements, you can use the **.e-detailcell** class selector, which targets the child grid. diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/row/detail-template.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/row/detail-template.md index ad79ca5638..adfe17e0bc 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/row/detail-template.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/row/detail-template.md @@ -105,3 +105,6 @@ Detail template is not supported with the following features: * Lazy load grouping * State persistence +## See also + +* [Detail row events](../hierarchy-grid#detail-row-events) \ No newline at end of file diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/selection/check-box-selection.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/selection/check-box-selection.md index 7096014c1f..88e46224d4 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/selection/check-box-selection.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/selection/check-box-selection.md @@ -88,6 +88,23 @@ In the following sample, the selection of specific rows has been prevented based ![Prevent specific rows from being selected in checkbox selection](../images/selection/checkbox-prevent.gif) +## 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 cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/selection/prevent-checkbox-selection/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="checkbox.cs" %} +{% include code-snippet/grid/selection/prevent-checkbox-selection/checkbox.cs %} +{% endhighlight %} +{% endtabs %} + ## How to select single row in checkbox selection mode The ASP.NET CORE 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. diff --git a/ej2-asp-core-mvc/image-editor/how-to/clear-image.md b/ej2-asp-core-mvc/image-editor/how-to/clear-image.md index 82e3acf68d..f5bb6ea9eb 100644 --- a/ej2-asp-core-mvc/image-editor/how-to/clear-image.md +++ b/ej2-asp-core-mvc/image-editor/how-to/clear-image.md @@ -1,15 +1,14 @@ --- layout: post -title: Filter in ##Platform_Name## Image editor control | Syncfusion -description: Learn here all about Filter in Syncfusion ##Platform_Name## ImageEditor component of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: Clear Image +title: Clear an Image in ##Platform_Name## Image editor control | Syncfusion +description: Learn here all about Clear an Image in Syncfusion ##Platform_Name## ImageEditor component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Clear an Image publishingplatform: ##Platform_Name## documentation: ug -domainurl: ##DomainURL## --- -# Clear an Image ##Platform_Name## Image Editor control +# Clear an Image in Image editor control The `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. diff --git a/ej2-asp-core-mvc/image-editor/how-to/fit-to-width-and-height.md b/ej2-asp-core-mvc/image-editor/how-to/fit-to-width-and-height.md new file mode 100644 index 0000000000..bed3b8eb3e --- /dev/null +++ b/ej2-asp-core-mvc/image-editor/how-to/fit-to-width-and-height.md @@ -0,0 +1,42 @@ +--- +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 ##Platform_Name## ImageEditor component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Fit to Width and Height +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Fit Image to Editor Width and Height + +The Image Editor's `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). + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/image-editor/how-to/fit-to-width-and-height/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Default.cs" %} +{% include code-snippet/image-editor/how-to/fit-to-width-and-height/default.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/image-editor/how-to/fit-to-width-and-height/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Default.cs" %} +{% include code-snippet/image-editor/how-to/fit-to-width-and-height/default.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +Output be like the below. + +![ImageEditor Sample](../images/image-editor-fit-to-width-and-height.jpg) \ No newline at end of file diff --git a/ej2-asp-core-mvc/image-editor/how-to/open-dialog.md b/ej2-asp-core-mvc/image-editor/how-to/open-dialog.md index d59a0df1af..7dbab7bc9b 100644 --- a/ej2-asp-core-mvc/image-editor/how-to/open-dialog.md +++ b/ej2-asp-core-mvc/image-editor/how-to/open-dialog.md @@ -1,12 +1,11 @@ --- layout: post -title: Filter in ##Platform_Name## ImageEditor Control | Syncfusion -description: Learn here all about Filter in Syncfusion ##Platform_Name## Image editor control of Syncfusion Essential JS 2 and more. +title: Render Editor in Dialog in ##Platform_Name## ImageEditor | 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-asp-core-mvc -control: Dialog +control: Render Image Editor in Dialog publishingplatform: ##Platform_Name## documentation: ug -domainurl: ##DomainURL## --- # Render Image Editor in Dialog diff --git a/ej2-asp-core-mvc/image-editor/how-to/reset.md b/ej2-asp-core-mvc/image-editor/how-to/reset.md index 3cb514e251..41ea846bc9 100644 --- a/ej2-asp-core-mvc/image-editor/how-to/reset.md +++ b/ej2-asp-core-mvc/image-editor/how-to/reset.md @@ -1,14 +1,14 @@ --- layout: post -title: Reset an image in Image Editor Component | Syncfusion -description: Learn here all about How to Reset an image in Image Component of Syncfusion Essential JS 2 and more. -control: Reset +title: Reset an image in ##Platform_Name## ImageEditor Control | Syncfusion +description: Learn here all about How to Reset an image in Syncfusion ##Platform_Name## Image editor control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Reset an image publishingplatform: ##Platform_Name## documentation: ug -domainurl: ##DomainURL## --- -# Reset in the ##Platform_Name## Image Editor control +# Reset an image in Image editor control The `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. diff --git a/ej2-asp-core-mvc/image-editor/images/image-editor-fit-to-width-and-height.jpg b/ej2-asp-core-mvc/image-editor/images/image-editor-fit-to-width-and-height.jpg new file mode 100644 index 0000000000..87ece1f125 Binary files /dev/null and b/ej2-asp-core-mvc/image-editor/images/image-editor-fit-to-width-and-height.jpg differ diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/clipboard-cleanup.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/clipboard-cleanup.md new file mode 100644 index 0000000000..6dafb378ac --- /dev/null +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/clipboard-cleanup.md @@ -0,0 +1,79 @@ +--- +layout: post +title: Clipboard Cleanup in ##Platform_Name## Syncfusion Rich Text Editor Component +description: Learn here all about Clipboard Cleanup in Syncfusion ##Platform_Name## Rich Text Editor component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Clipboard Cleanup +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Clipboard Cleanup in ##Platform_Name## Rich Text Editor Control + +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://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.richtexteditor.richtexteditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_EnableClipboardCleanup) property. + +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. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/clipboard-cleanup/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/clipboard-cleanup/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/clipboard-cleanup/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/clipboard-cleanup/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Customizing Copied/Cut Content + +You can use the [BeforeClipboardWrite](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.richtexteditor.richtexteditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_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. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/clipboard-cleanup-customize/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/clipboard-cleanup-customize/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/clipboard-cleanup-customize/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/clipboard-cleanup-customize/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Best Practices & Troubleshooting + +### Best Practices + +- Use `BeforeClipboardWrite` sparingly — heavy processing can slightly delay `Ctrl+C`. + +### Common Issues + +- “Event not firing” → Make sure you’re using the correct event name `BeforeClipboardWrite` (PascalCase in MVC). diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/import-and-export.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/import-and-export.md index ba5ff7b5ef..ceb113313e 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/import-and-export.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/import-and-export.md @@ -41,6 +41,37 @@ The following example illustrates how to set up the `ImportWord` in the Rich Tex {% endtabs %} {% endif %} +## Secure importing with authentication + +The Rich Text Editor provides functionality to import Word documents with authentication for secure importing. + +The [wordImporting](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorWordImporting.html) event provides [UploadingEventArgs](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.inputs.uploader.html) 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: + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/secureimport/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/secureimport/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/secureimport/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/secureimport/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + ## Exporting Content to PDF and Microsoft Word 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. @@ -70,4 +101,35 @@ The following example demonstrates how to configure the `ExportWord` and `Export {% include code-snippet/rich-text-editor/export/controller.cs %} {% endhighlight %} {% endtabs %} +{% endif %} + +## Secure exporting with authentication + +The Rich Text Editor provides functionality to export Word or PDF documents with authentication for secure exporting. + +The [documentExporting](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorDocumentExporting.html) 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: + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/secureexport/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/secureexport/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/secureexport/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/secureexport/controller.cs %} +{% endhighlight %} +{% endtabs %} {% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/selection.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/selection.md index 04c0f8181e..a301d0bf25 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/selection.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/selection.md @@ -14,7 +14,118 @@ documentation: ug The Rich Text Editor supports character range-based text selection using the **Syncfusion Slider** control. This feature allows users to select a specific range of characters (e.g., 33–45) within the editor content, which is then automatically highlighted. -This functionality is useful for scenarios where precise text selection is needed for operations such as copying, formatting, or analysis. +### Adding a Slider for character range selection + +The Rich Text Editor can be integrated with the **Slider** control to enable precise character range-based text selection. The slider is configured in `range` type, allowing users to select a start and end index within the editor content. When the slider values change, the corresponding text range is highlighted automatically. + +This approach is particularly useful for scenarios where exact character-level selection is required for operations such as copying, formatting, or analysis. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +@{ +var sliderValue = new int[] { 0, 50 }; +} + +@Html.EJS().Slider("range").Value(sliderValue).Type(Syncfusion.EJ2.Inputs.SliderType.Range).Min(0).Max(400).Render() + +{% 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 cshtml tabtitle="CSHTML" %} + +@Html.EJS().RichTextEditor("editor").Height("400px").ContentTemplate(@

The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here. Key features: Provides IFRAME and DIV modes. Bulleted and numbered lists. Handles images, hyperlinks, videos, hyperlinks, uploads, etc. Contains undo/redo manager.

).Render() + + + +{% endhighlight %} +{% endtabs %} + +### Precise selection using DOM range + +The selection logic is implemented in the [Change](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.inputs.slider.html#Syncfusion_EJ2_Inputs_Slider_Change) event of the slider. It retrieves the start and end positions from the slider and ensures they are within valid bounds. The code then uses a helper function, `getTextNodeAtOffset()`, which employs a `TreeWalker` to traverse text nodes and locate the exact node and offset for the given character positions. + +A Range object is created using these offsets and applied to the current selection using the browser’s `Selection` API. This guarantees accurate highlighting even when the content spans multiple text nodes. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +@{ +var sliderValue = new int[] { 0, 50 }; +} + +@Html.EJS().Slider("range").Value(sliderValue).Type(Syncfusion.EJ2.Inputs.SliderType.Range).Min(0).Max(400).Change("onChange").Render() + + + +{% 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 cshtml tabtitle="CSHTML" %} + + + +{% endhighlight %} +{% endtabs %} {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mail-merge.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mail-merge.md index fe10eb7882..0559724158 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mail-merge.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mail-merge.md @@ -14,6 +14,274 @@ The Rich Text Editor can be customized to implement **Mail Merge** functionality 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://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_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. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +@{ + var tools = new object[] + { + "Bold", "Italic", "Underline", "|", "Formats", "Alignments", "OrderedList", "UnorderedList", "|", "CreateLink", "Image", "CreateTable", "|", + new { tooltipText = "Merge Data", template = "#merge_data", command = "Custom" }, + new { tooltipText = "Insert Field", template = "#insert_Field", command = "Custom" }, + "SourceCode", "|", "Undo", "Redo", + }; +} + + + + +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +@{ + var tools = new object[] + { + "Bold", "Italic", "Underline", "|", "Formats", "Alignments", "OrderedList", "UnorderedList", "|", "CreateLink", "Image", "CreateTable", "|", + new { tooltipText = "Merge Data", template = "#merge_data", command = "Custom" }, + new { tooltipText = "Insert Field", template = "#insert_Field", command = "Custom" }, + "SourceCode", "|", "Undo", "Redo", + }; +} + +@Html.EJS().RichTextEditor("mailMergeEditor").ToolbarSettings(e => e.Items(tools)).Value(rteValue).Render() + +{% endhighlight %} +{% endtabs %} + +{% endif %} + +## 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. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +@{ + var items = new List + { + new { text = "First Name" }, + new { text = "Last Name" }, + new { text = "Support Email" }, + new { text = "Company Name" }, + new { text = "Promo Code" }, + new { text = "Support Phone Number" }, + new { text = "Customer ID" }, + new { text = "Expiration Date" }, + new { text = "Subscription Plan" } + }; +} + + + + + +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +@{ + var items = new List + { + new { text = "First Name" }, + new { text = "Last Name" }, + new { text = "Support Email" }, + new { text = "Company Name" }, + new { text = "Promo Code" }, + new { text = "Support Phone Number" }, + new { text = "Customer ID" }, + new { text = "Expiration Date" }, + new { text = "Subscription Plan" } + }; +} + +@Html.EJS().DropDownButton("insert_Field").Content("Insert Field").Select("onItemSelect").Items(items).CssClass("e-rte-dropdown-btn e-rte-dropdown-popup e-rte-dropdown-items e-rte-elements e-rte-dropdown-menu").Render() + + + +{% endhighlight %} +{% endtabs %} + +{% endif %} + +## Populating merge fields using Mention + +The **Mention** control 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. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +@{ + var mergeData = new List + { + new { text = "First Name", value = "FirstName" }, + new { text = "Last Name", value = "LastName" }, + new { text = "Support Email", value = "SupportEmail" }, + new { text = "Company Name", value = "CompanyName" }, + new { text = "Promo Code", value = "PromoCode" }, + new { text = "Support Phone Number", value = "SupportPhoneNumber" }, + new { text = "Customer ID", value = "CustomerID" }, + new { text = "Expiration Date", value = "ExpirationDate" }, + new { text = "Subscription Plan", value = "SubscriptionPlan" } + }; + char mentionChar = {{; + +} + + + + +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +@{ + var mergeData = new List + { + new { text = "First Name", value = "FirstName" }, + new { text = "Last Name", value = "LastName" }, + new { text = "Support Email", value = "SupportEmail" }, + new { text = "Company Name", value = "CompanyName" }, + new { text = "Promo Code", value = "PromoCode" }, + new { text = "Support Phone Number", value = "SupportPhoneNumber" }, + new { text = "Customer ID", value = "CustomerID" }, + new { text = "Expiration Date", value = "ExpirationDate" }, + new { text = "Subscription Plan", value = "SubscriptionPlan" } + }; + char mentionChar = {{; +} + +@Html.EJS().Mention("mentionField").MentionChar(mentionChar).Created("onMentionCreate").Target("#mailMergeEditor_rte-edit-view").DataSource(mergeData).AllowSpaces(true).Fields(new MentionFieldSettings { Text = "Text" }).DisplayTemplate(" {{${Value}}} ").Render() + +{% endhighlight %} +{% endtabs %} + +{% endif %} + +## 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. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + + + + + +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +@Html.EJS().Button("merge_data").Content("Merge Data").Click("onClickHandler").CssClass("e-tbar-btn e-btn").Render() + + + +{% endhighlight %} +{% endtabs %} + +{% endif %} + {% if page.publishingplatform == "aspnet-core" %} {% tabs %} @@ -35,4 +303,4 @@ This feature simplifies the creation of dynamic documents by allowing users to i {% include code-snippet/rich-text-editor/mail-merge/controller.cs %} {% endhighlight %} {% endtabs %} -{% endif %} \ No newline at end of file +{% endif %} diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/text-formatting.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/text-formatting.md index 50ce849adc..dcd04131f5 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/text-formatting.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/text-formatting.md @@ -1,6 +1,6 @@ --- layout: post -title: Text formatting and Structure in ##Platform_Name## Rich Text Editor | Syncfusion +title: Text Formatting in ##Platform_Name## Rich Text Editor | Syncfusion description: Learn here all about Text formatting and Structure in Syncfusion ##Platform_Name## Rich Text Editor control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Text formatting and Structure @@ -8,7 +8,7 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# Text Formatting and Structure in the ##Platform_Name## Rich Text Editor Control +# Text Formatting in the ##Platform_Name## Rich Text Editor Control ## Basic text styling @@ -247,7 +247,7 @@ In the Rich Text Editor, pressing the `Tab` key while the cursor is inside a lis Please refer to the below video for visual behavior and interaction examples: -![Rich Text Editor list editing behaviour](../images/list-editing.gif) +![Rich Text Editor list editing behaviour](../../images/list-editing.gif) ## Increase and decrease indent @@ -463,6 +463,68 @@ While the toolbar does not provide a direct method to apply blockquote formattin {% endtabs %} {% endif %} +## 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://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#items) property. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/line-height/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/line-height/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/line-height/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/line-height/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +The Rich Text Editor comes with a pre-configured set of [`lineHeight`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#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://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#lineheight) property. This allows you to extend the available line height options beyond the default selection. + +The [`supportAllValues`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#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. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/line-height-cs1/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/line-height-cs1/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/line-height-cs1/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/line-height-cs1/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + ## 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. @@ -626,4 +688,64 @@ Using `Clear Format` makes it easy to undo styling changes and keep your text lo {% include code-snippet/rich-text-editor/clear-format-cs2/controller.cs %} {% endhighlight %} {% endtabs %} +{% endif %} + +## Markdown Auto Format + +The Rich Text Editor supports automatic conversion of Markdown syntax into HTML using the [EnableMarkdownAutoFormat](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_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 `#`. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/markdown-autoformat/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/markdown-autoformat/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/markdown-autoformat/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/markdown-autoformat/controller.cs %} +{% endhighlight %} +{% endtabs %} {% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/clipboard-cleanup.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/clipboard-cleanup.md new file mode 100644 index 0000000000..b8391864f1 --- /dev/null +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/clipboard-cleanup.md @@ -0,0 +1,80 @@ +--- +layout: post +title: Clipboard Cleanup in ##Platform_Name## Syncfusion Rich Text Editor Control +description: Learn here all about Clipboard Cleanup in Syncfusion ##Platform_Name## Rich Text Editor control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Clipboard Cleanup +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Clipboard Cleanup in ##Platform_Name## Rich Text Editor Control + +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://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.richtexteditor.richtexteditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_EnableClipboardCleanup) property. + +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. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/clipboard-cleanup/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/clipboard-cleanup/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/clipboard-cleanup/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/clipboard-cleanup/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Customizing Copied/Cut Content + +You can use the [beforeClipboardWrite](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_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. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/clipboard-cleanup-customize/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/clipboard-cleanup-customize/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/clipboard-cleanup-customize/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/clipboard-cleanup-customize/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Best Practices & Troubleshooting + +### Best Practices + +- Use `beforeClipboardWrite` sparingly — heavy processing can slightly delay `Ctrl+C`. + +### Common Issues + +- “Event not firing” → Make sure you’re using the correct event name `beforeClipboardWrite` (camelCase in Core). + diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/import-and-export.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/import-and-export.md index 00e46422d6..a1ebd8ad7c 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/import-and-export.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/import-and-export.md @@ -41,6 +41,37 @@ The following example illustrates how to set up the `ImportWord` in the Rich Tex {% endtabs %} {% endif %} +## Secure importing with authentication + +The Rich Text Editor provides functionality to import Word documents with authentication for secure importing. + +The [wordImporting](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorWordImporting.html) event provides [UploadingEventArgs](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.inputs.uploader.html) 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: + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/secureimport/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/secureimport/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/secureimport/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/secureimport/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + ## Exporting content to PDF and Microsoft Word 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. @@ -70,4 +101,35 @@ The following example demonstrates how to configure the `ExportWord` and `Export {% include code-snippet/rich-text-editor/export/controller.cs %} {% endhighlight %} {% endtabs %} +{% endif %} + +## Secure exporting with authentication + +The Rich Text Editor provides functionality to export Word or PDF documents with authentication for secure exporting. + +The [documentExporting](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorDocumentExporting.html) 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: + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/secureexport/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/secureexport/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/secureexport/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/secureexport/controller.cs %} +{% endhighlight %} +{% endtabs %} {% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/selection.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/selection.md index 04c0f8181e..2bcca377b8 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/selection.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/selection.md @@ -14,7 +14,124 @@ documentation: ug The Rich Text Editor supports character range-based text selection using the **Syncfusion Slider** control. This feature allows users to select a specific range of characters (e.g., 33–45) within the editor content, which is then automatically highlighted. -This functionality is useful for scenarios where precise text selection is needed for operations such as copying, formatting, or analysis. +### Adding a Slider for character range selection + +The Rich Text Editor can be integrated with the **Slider** control to enable precise character range-based text selection. The slider is configured in `range` type, allowing users to select a start and end index within the editor content. When the slider values change, the corresponding text range is highlighted automatically. + +This approach is particularly useful for scenarios where exact character-level selection is required for operations such as copying, formatting, or analysis. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +@{ +var sliderValue = new int[] { 0, 50 }; +} + + + +{% 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 cshtml tabtitle="CSHTML" %} + + + +

+ The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here. Key features: Provides IFRAME and DIV modes. Bulleted and numbered lists. Handles images, hyperlinks, videos, hyperlinks, uploads, etc. Contains undo/redo manager. +

+ + + + + +{% endhighlight %} +{% endtabs %} + +### Precise selection using DOM range + +The selection logic is implemented in the [change](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.inputs.slider.html#Syncfusion_EJ2_Inputs_Slider_Change) event of the slider. It retrieves the start and end positions from the slider and ensures they are within valid bounds. The code then uses a helper function, `getTextNodeAtOffset()`, which employs a `TreeWalker` to traverse text nodes and locate the exact node and offset for the given character positions. + +A Range object is created using these offsets and applied to the current selection using the browser’s `Selection` API. This guarantees accurate highlighting even when the content spans multiple text nodes. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +@{ +var sliderValue = new int[] { 0, 50 }; +} + + + + + +{% 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 cshtml tabtitle="CSHTML" %} + + + +{% endhighlight %} +{% endtabs %} {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mail-merge.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mail-merge.md index fe10eb7882..d2ed3b20ce 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mail-merge.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mail-merge.md @@ -14,6 +14,273 @@ The Rich Text Editor can be customized to implement **Mail Merge** functionality 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://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_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. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +@{ + var tools = new object[] + { + "Bold", "Italic", "Underline", "|", "Formats", "Alignments", "OrderedList", "UnorderedList", "|", "CreateLink", "Image", "CreateTable", "|", + new { tooltipText = "Merge Data", template = "#merge_data", command = "Custom" }, + new { tooltipText = "Insert Field", template = "#insert_Field", command = "Custom" }, + "SourceCode", "|", "Undo", "Redo", + }; +} + + + + +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +@{ + var tools = new object[] + { + "Bold", "Italic", "Underline", "|", "Formats", "Alignments", "OrderedList", "UnorderedList", "|", "CreateLink", "Image", "CreateTable", "|", + new { tooltipText = "Merge Data", template = "#merge_data", command = "Custom" }, + new { tooltipText = "Insert Field", template = "#insert_Field", command = "Custom" }, + "SourceCode", "|", "Undo", "Redo", + }; +} + +@Html.EJS().RichTextEditor("mailMergeEditor").ToolbarSettings(e => e.Items(tools)).Value(rteValue).Render() + +{% endhighlight %} +{% endtabs %} + +{% endif %} + +## 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. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +@{ + var items = new List + { + new { text = "First Name" }, + new { text = "Last Name" }, + new { text = "Support Email" }, + new { text = "Company Name" }, + new { text = "Promo Code" }, + new { text = "Support Phone Number" }, + new { text = "Customer ID" }, + new { text = "Expiration Date" }, + new { text = "Subscription Plan" } + }; +} + + + + + +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +@{ + var items = new List + { + new { text = "First Name" }, + new { text = "Last Name" }, + new { text = "Support Email" }, + new { text = "Company Name" }, + new { text = "Promo Code" }, + new { text = "Support Phone Number" }, + new { text = "Customer ID" }, + new { text = "Expiration Date" }, + new { text = "Subscription Plan" } + }; +} + +@Html.EJS().DropDownButton("insert_Field").Content("Insert Field").Select("onItemSelect").Items(items).CssClass("e-rte-dropdown-btn e-rte-dropdown-popup e-rte-dropdown-items e-rte-elements e-rte-dropdown-menu").Render() + + + +{% endhighlight %} +{% endtabs %} + +{% endif %} + +## Populating merge fields using Mention + +The **Mention** control 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. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +@{ + var mergeData = new List + { + new { text = "First Name", value = "FirstName" }, + new { text = "Last Name", value = "LastName" }, + new { text = "Support Email", value = "SupportEmail" }, + new { text = "Company Name", value = "CompanyName" }, + new { text = "Promo Code", value = "PromoCode" }, + new { text = "Support Phone Number", value = "SupportPhoneNumber" }, + new { text = "Customer ID", value = "CustomerID" }, + new { text = "Expiration Date", value = "ExpirationDate" }, + new { text = "Subscription Plan", value = "SubscriptionPlan" } + }; + char mentionChar = {{; +} + + + + +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +@{ + var mergeData = new List + { + new { text = "First Name", value = "FirstName" }, + new { text = "Last Name", value = "LastName" }, + new { text = "Support Email", value = "SupportEmail" }, + new { text = "Company Name", value = "CompanyName" }, + new { text = "Promo Code", value = "PromoCode" }, + new { text = "Support Phone Number", value = "SupportPhoneNumber" }, + new { text = "Customer ID", value = "CustomerID" }, + new { text = "Expiration Date", value = "ExpirationDate" }, + new { text = "Subscription Plan", value = "SubscriptionPlan" } + }; + char mentionChar = {{; +} + +@Html.EJS().Mention("mentionField").MentionChar(mentionChar).Created("onMentionCreate").Target("#mailMergeEditor_rte-edit-view").DataSource(mergeData).AllowSpaces(true).Fields(new MentionFieldSettings { Text = "Text" }).DisplayTemplate(" {{${Value}}} ").Render() + +{% endhighlight %} +{% endtabs %} + +{% endif %} + +## 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. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + + + + + +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +@Html.EJS().Button("merge_data").Content("Merge Data").Click("onClickHandler").CssClass("e-tbar-btn e-btn").Render() + + + +{% endhighlight %} +{% endtabs %} + +{% endif %} + {% if page.publishingplatform == "aspnet-core" %} {% tabs %} diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/text-formatting.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/text-formatting.md index b4960173d6..e25a10e051 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/text-formatting.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/text-formatting.md @@ -1,6 +1,6 @@ --- layout: post -title: Text formatting and Structure in ##Platform_Name## Rich Text Editor | Syncfusion +title: Text Formatting in ##Platform_Name## Rich Text Editor | Syncfusion description: Learn here all about Text formatting and Structure in Syncfusion ##Platform_Name## Rich Text Editor control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Text formatting and Structure @@ -8,7 +8,7 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# Text Formatting and Structure in the ##Platform_Name## Rich Text Editor Control +# Text Formatting in the ASP.NET Core Rich Text Editor Control ## Basic text styling @@ -247,7 +247,7 @@ In the Rich Text Editor, pressing the `Tab` key while the cursor is inside a lis Please refer to the below video for visual behavior and interaction examples: -![Rich Text Editor list editing behaviour](../images/list-editing.gif) +![Rich Text Editor list editing behaviour](../../images/list-editing.gif) ## Increase and decrease indent @@ -463,6 +463,68 @@ While the toolbar does not provide a direct method to apply blockquote formattin {% endtabs %} {% endif %} +## 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://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#items) property. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/line-height/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/line-height/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/line-height/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/line-height/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +The Rich Text Editor comes with a pre-configured set of [`lineHeight`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#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://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#lineheight) property. This allows you to extend the available line height options beyond the default selection. + +The [`supportAllValues`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#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. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/line-height-cs1/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/line-height-cs1/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/line-height-cs1/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/line-height-cs1/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + ## 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. @@ -496,7 +558,7 @@ Use the `HorizontalLine` tool in the editor below to see the feature in action. ## Format painter -The format painter tool enables users to replicate formatting from one text segment and apply it to another. It can be accessed through the toolbar or keyboard shortcuts, allowing for the transfer of formatting styles from individual words to entire paragraphs. Customization options for the format painter are available through the [formatPainterSettings](../api/rich-text-editor/https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorFormatPainterSettings.html/) property. +The format painter tool enables users to replicate formatting from one text segment and apply it to another. It can be accessed through the toolbar or keyboard shortcuts, allowing for the transfer of formatting styles from individual words to entire paragraphs. Customization options for the format painter are available through the [formatPainterSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorFormatPainterSettings.html) property. ### Configuring format painter tool in the toolbar @@ -517,7 +579,7 @@ The following code example shows how to add the format painter tool in the Rich ### Customizing copy and paste format -You can customize the format painter tool in the Rich Text Editor using the [formatPainterSettings](../api/rich-text-editor/https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorFormatPainterSettings.html/) property. +You can customize the format painter tool in the Rich Text Editor using the [formatPainterSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorFormatPainterSettings.html) property. The [allowedFormats](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorFormatPainterSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorFormatPainterSettings_AllowedFormats) property helps you to specify tag names that allow the formats to be copied from the selected text. For instance, you can include formats from the selected text using tags like `p; h1; h2; h3; div; ul; ol; li; span; strong; em; code;`. The following example demonstrates how to customize this functionality. @@ -626,4 +688,64 @@ Using `Clear Format` makes it easy to undo styling changes and keep your text lo {% include code-snippet/rich-text-editor/clear-format-cs2/controller.cs %} {% endhighlight %} {% endtabs %} +{% endif %} + +## Markdown Auto Format + +The Rich Text Editor supports automatic conversion of Markdown syntax into HTML using the [EnableMarkdownAutoFormat](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_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 `#`. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/markdown-autoformat/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/markdown-autoformat/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/markdown-autoformat/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/markdown-autoformat/controller.cs %} +{% endhighlight %} +{% endtabs %} {% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/images/list-editing.gif b/ej2-asp-core-mvc/rich-text-editor/images/list-editing.gif index 2b004d0e7b..881d39dc12 100644 Binary files a/ej2-asp-core-mvc/rich-text-editor/images/list-editing.gif and b/ej2-asp-core-mvc/rich-text-editor/images/list-editing.gif differ diff --git a/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/annotation.md b/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/annotation.md deleted file mode 100644 index 10656dde36..0000000000 --- a/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/annotation.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -layout: post -title: Annotations in ##Platform_Name## Smart Paste Button Control | Syncfusion -description: Learn how to use annotations with the ##Platform_Name## Smart Paste Button control of Syncfusion Essential JS 2 and more details. -platform: ej2-asp-core-mvc -control: Annotations -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Annotations in ASP.NET Core Smart Paste Button Control - -The Syncfusion ASP.NET Core Smart Paste Button control leverages AI to intelligently parse clipboard content and populate form fields, enhancing user productivity. By default, the control analyzes form fields (e.g., ``, ` - -
- - -
-
- -
- - -
-
- - -
-
-
- - -
- - - - - -
-
- I am John Doe from the United States. My email is johndoe@example.com, and my phone number is 555-123-4567. I’d like to inquire about your services and have a detailed discussion regarding your product offerings. Please contact me via email. I’m happy to subscribe to your newsletter for updates. Thank you! -
- -{% endhighlight %} -{% endtabs %} - -![Syncfusion ASP.NET Core Smart Paste Button with Annotation](images/SmartPaste_Annotation.gif) diff --git a/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/claude-service.md b/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/claude-service.md deleted file mode 100644 index b42deedf6b..0000000000 --- a/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/claude-service.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -layout: post -title: Claude AI in ##Platform_Name## Smart Paste Button Control | Syncfusion -description: Learn how to implement a custom AI service using Claude AI with ##Platform_Name## Smart Paste Button control of Syncfusion Essential JS 2 and more details. -platform: ej2-asp-core-mvc -control: Claude AI -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Claude AI Integration with ASP.NET Core Smart Paste Button - -The Syncfusion ASP.NET Core SmartPaste Button control enables AI-powered, context-aware content pasting into forms, typically using OpenAI or Azure OpenAI. This guide explains how to integrate the Anthropic Claude AI service with the Smart Paste Button using the `IChatInferenceService` interface, enabling custom AI-driven responses in a ASP.NET Core App. - -## Setting Up Claude - -1. **Create an Anthropic Account** - Visit [Anthropic Console](https://console.anthropic.com), sign up, and complete the verification process. -2. **Obtain an API Key** - Navigate to [API Keys](https://console.anthropic.com/settings/keys) and click "Create Key." -3. **Review Model Specifications** - Refer to [Claude Models Documentation](https://docs.anthropic.com/claude/docs/models-overview) for details on available models. - -## Create a Claude AI Service - -Create a service class to manage interactions with the Claude API, including authentication and response processing for the Smart Paste Button. - -1. Create a `Services` folder in your project. -2. Add a new file named `ClaudeAIService.cs` in the `Services` folder. -3. Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., `appsettings.json`). - -```csharp -using Microsoft.Extensions.AI; -using System.Net; -using System.Text; -using System.Text.Json; - -public class ClaudeAIService -{ - private readonly string _apiKey; - private readonly string _modelName = "claude-3-5-sonnet-20241022"; // Example model - private readonly string _endpoint = "https://api.anthropic.com/v1/messages"; - private static readonly HttpClient HttpClient = new(new SocketsHttpHandler - { - PooledConnectionLifetime = TimeSpan.FromMinutes(30), - EnableMultipleHttp2Connections = true - }) - { - DefaultRequestVersion = HttpVersion.Version20 // Fallback to HTTP/2 for compatibility - }; - private static readonly JsonSerializerOptions JsonOptions = new() - { - PropertyNamingPolicy = JsonNamingPolicy.CamelCase - }; - - public ClaudeAIService(IConfiguration configuration) - { - _apiKey = configuration["Claude:ApiKey"] ?? throw new ArgumentNullException("Claude API key is missing."); - if (!HttpClient.DefaultRequestHeaders.Contains("x-api-key")) - { - HttpClient.DefaultRequestHeaders.Clear(); - HttpClient.DefaultRequestHeaders.Add("x-api-key", _apiKey); - HttpClient.DefaultRequestHeaders.Add("anthropic-version", "2023-06-01"); // Check latest version in Claude API docs - } - } - - public async Task CompleteAsync(IList chatMessages) - { - var requestBody = new ClaudeChatRequest - { - Model = _modelName, - Max_tokens = 1000, // Maximum tokens in response - Messages = chatMessages.Select(m => new ClaudeMessage - { - Role = m.Role == ChatRole.User ? "user" : "assistant", - Content = m.Text - }).ToList(), - Stop_sequences = new List { "END_INSERTION", "NEED_INFO", "END_RESPONSE" } // Configurable stop sequences - }; - - var content = new StringContent(JsonSerializer.Serialize(requestBody, JsonOptions), Encoding.UTF8, "application/json"); - - try - { - var response = await HttpClient.PostAsync(_endpoint, content); - response.EnsureSuccessStatusCode(); - var responseString = await response.Content.ReadAsStringAsync(); - var responseObject = JsonSerializer.Deserialize(responseString, JsonOptions); - return responseObject?.Content?.FirstOrDefault()?.Text ?? "No response from Claude model."; - } - catch (Exception ex) when (ex is HttpRequestException || ex is JsonException) - { - throw new InvalidOperationException("Failed to communicate with Claude API.", ex); - } - } -} -``` - -N> Store the Claude API key in `appsettings.json` (e.g., `{ "Claude": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security. Verify the `anthropic-version` header in [Claude API Documentation](https://docs.anthropic.com/claude/docs) for the latest version. - -## Define Request and Response Models - -Define C# classes to match the Claude API’s JSON request and response format. - -1. Create a new file named `ClaudeModels.cs` in the `Services` folder. -2. Add the following model classes: - -```csharp -public class ClaudeChatRequest -{ - public string Model { get; set; } - public int Max_tokens { get; set; } - public List Messages { get; set; } - public List Stop_sequences { get; set; } -} - -public class ClaudeMessage -{ - public string Role { get; set; } - public string Content { get; set; } -} - -public class ClaudeChatResponse -{ - public List Content { get; set; } -} - -public class ClaudeContentBlock -{ - public string Text { get; set; } -} -``` - -## Create a Custom AI Service - -Implement the `IChatInferenceService` interface to connect the Smart Paste Button to the Claude service, acting as a bridge for AI-generated responses. - -1. Create a new file named `ClaudeInferenceService.cs` in the `Services` folder. -2. Add the following implementation: - -```csharp -using Syncfusion.EJ2.AI; -using System.Threading.Tasks; - -public class ClaudeInferenceService : IChatInferenceService -{ - private readonly ClaudeAIService _claudeService; - - public ClaudeInferenceService(ClaudeAIService claudeService) - { - _claudeService = claudeService; - } - - public async Task GenerateResponseAsync(ChatParameters options) - { - return await _claudeService.CompleteAsync(options.Messages); - } -} -``` - -## Configure the ASP.NET Core App - -Register the Claude service and `IChatInferenceService` implementation in the dependency injection container. - -Update the **~/Program.cs** file as follows: - -```csharp -using Syncfusion.EJ2; -using Syncfusion.EJ2.AI; - -builder.Services.AddRazorPages(); -builder.Services.AddSyncfusionSmartComponents(); -builder.Services.AddSingleton(); -builder.Services.AddSingleton(); - -var app = builder.Build(); -// ... -``` - -## Add the Smart Paste Button - -Add the Smart Paste Button to a form in the **~/Pages/Index.cshtml** file to test the Claude AI integration. - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -

Contact Form

-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- -
- - -
-
- - -
-
-
- - -
- - - -
- -
-
- I am John Doe from the United States. My email is johndoe@example.com, and my phone number is 555-123-4567. I’d like to inquire about your services and have a detailed discussion regarding your product offerings. Please contact me via email. I’m happy to subscribe to your newsletter for updates. Thank you! -
- -{% endhighlight %} -{% endtabs %} - -Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core -Smart Paste Button control will be rendered in the default web browser. - -![ASP.NET Core Smart Paste Button Control](images/SmartPaste.gif) - -## Troubleshooting - -If the Claude AI integration does not work, try the following: -- **No Suggestions Displayed**: Verify that the Claude API key and model name are correct in the configuration. Check the `ClaudeAIService` implementation for errors. -- **HTTP Request Failures**: Ensure a stable internet connection and that the Claude API endpoint (`https://api.anthropic.com/v1/messages`) is accessible. Test with HTTP/2 if compatibility issues arise. -- **Service Registration Errors**: Confirm that `ClaudeAIService` and `ClaudeInferenceService` are registered in **Program.cs**. \ No newline at end of file diff --git a/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/custom-inference-backend.md b/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/custom-inference-backend.md deleted file mode 100644 index a8b829f83b..0000000000 --- a/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/custom-inference-backend.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -layout: post -title: Custom AI with ##Platform_Name## Smart Paste Button Control | Syncfusion -description: Learn how to integrate custom AI services with ##Platform_Name## Smart Paste Button control of Syncfusion Essential JS 2 and more details. -platform: ej2-asp-core-mvc -control: Custom AI Service -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Custom AI Service Integration with ASP.NET Core Smart Paste Button - -The Syncfusion ASP.NET Core Smart Paste Button leverages AI to parse clipboard content and populate form fields, enhancing user productivity. By default, it supports OpenAI and Azure OpenAI services, but you can integrate custom AI services using the `IChatInferenceService` interface. This interface facilitates communication between the Smart Paste Button and your custom AI provider, enabling precise mapping of clipboard data to form fields. - -## IChatInferenceService Interface - -The `IChatInferenceService` interface defines a contract for integrating AI services with the Smart Paste Button, enabling the control to process clipboard data for form field mapping. - -```csharp -public interface IChatInferenceService -{ - Task GenerateResponseAsync(ChatParameters options); -} -``` - -The `GenerateResponseAsync` method takes `ChatParameters` (containing clipboard data and form field metadata) and returns a string response from the AI service, which the Smart Paste Button uses to populate form fields. - -## Simple Implementation of a Custom AI Service - -Below is a sample implementation of a mock AI service named `MockAIService`. This service demonstrates how to implement the `IChatInferenceService` interface by returning sample, context-aware responses. You can replace the logic with your own AI integration. - -```csharp -using Syncfusion.EJ2.AI; -using System.Threading.Tasks; - -public class MockAIService : IChatInferenceService -{ - public Task GenerateResponseAsync(ChatParameters options) - { - - } -} -``` - -## Registering the Custom AI Service - -Register the custom AI service in the **~/Program.cs** file of your ASP.NET Core Application: - -```csharp -using Syncfusion.EJ2; -using Syncfusion.EJ2.AI; - -builder.Services.AddRazorPages(); -builder.Services.AddSyncfusionSmartComponents(); -builder.Services.AddSingleton(); - -var app = builder.Build(); -// ... -``` - -## Implemented AI Services - -Here are examples of AI services integrated using the `IChatInferenceService` interface: - -| Service | Documentation | -|---------|---------------| -| Claude | [Claude Integration](claude-service) | -| DeepSeek | [DeepSeek Integration](deepseek-service) | -| Groq | [Groq Integration](groq-service) | -| Gemini | [Gemini Integration](gemini-service) | - -## Troubleshooting - -If the custom AI integration does not work as expected, try the following: -- **Fields Not Populating**: Verify that the custom AI service’s endpoint, model, and API key are correct in `appsettings.json`. Ensure the `GenerateResponseAsync` method returns valid data. -- **Service Registration Errors**: Confirm that `CustomAIService` and `CustomInferenceService` are registered in **Program.cs**. -- **AI Parsing Errors**: Check the AI service’s response format and ensure it matches the expected `CustomAIResponse` structure. Test the API independently to verify connectivity. diff --git a/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/customization.md b/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/customization.md deleted file mode 100644 index 6788ca4a80..0000000000 --- a/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/customization.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -layout: post -title: Customization in ##Platform_Name## Smart Paste Button Control | Syncfusion -description: Explore styles and appearance customization options with ##Platform_Name## Smart Paste Button control of Syncfusion Essential JS 2 and more details. -platform: ej2-asp-core-mvc -control: Types and Appearance -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Types and Appearance - -The Syncfusion® ASP.NET Core Smart Paste Button control inherits all properties, types, and styling options of the Syncfusion® ASP.NET Core Button control. This allows users to utilize the existing features and flexibility of the Syncfusion® ASP.NET Core Button while taking advantage of the enhanced Smart Paste Button functionality. - -- [Types and Styles](https://ej2.syncfusion.com/aspnetcore/documentation/button/types-and-styles) -- [Style and Appearance](https://ej2.syncfusion.com/aspnetcore/documentation/button/style-and-appearance) - -## See Also - -- [ASP.NET Core Button Control: Types and Styles](https://ej2.syncfusion.com/aspnetcore/documentation/button/types-and-styles) \ No newline at end of file diff --git a/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/deepseek-service.md b/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/deepseek-service.md deleted file mode 100644 index 86e8c9f153..0000000000 --- a/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/deepseek-service.md +++ /dev/null @@ -1,249 +0,0 @@ ---- -layout: post -title: DeepSeek AI in ##Platform_Name## Smart Paste Button Control | Syncfusion -description: Learn how to implement a custom AI service using DeepSeek AI with ##Platform_Name## Smart Paste Button control of Syncfusion Essential JS 2 and more details. -platform: ej2-asp-core-mvc -control: DeepSeek AI -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# DeepSeek AI Integration with ASP.NET Core Smart Paste Button - -The Syncfusion ASP.NET Core SmartPaste Button control enables AI-powered, context-aware content pasting into forms, typically using OpenAI or Azure OpenAI. This guide explains how to integrate the DeepSeek AI service with the Smart Paste Button using the `IChatInferenceService` interface, enabling custom AI-driven responses in a ASP.NET Core App. - -## Setting Up DeepSeek - -1. **Obtain a DeepSeek API Key** - Create an account at [DeepSeek Platform](https://platform.deepseek.com), sign in, and navigate to [API Keys](https://platform.deepseek.com/api_keys) to generate an API key. -2. **Review Model Specifications** - Refer to [DeepSeek Models Documentation](https://api-docs.deepseek.com/quick_start/pricing) for details on available models (e.g., `deepseek-chat`). - -## Create a DeepSeek AI Service - -Create a service class to manage interactions with the DeepSeek API, including authentication and response processing for the Smart Paste Button. - -1. Create a `Services` folder in your project. -2. Add a new file named `DeepSeekAIService.cs` in the `Services` folder. -3. Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., `appsettings.json`). - -```csharp -using System.Net; -using System.Text; -using System.Text.Json; -using Microsoft.Extensions.AI; - -public class DeepSeekAIService -{ - private readonly string _apiKey; - private readonly string _modelName = "deepseek-chat"; // Example model - private readonly string _endpoint = "https://api.deepseek.com/chat/completions"; - private static readonly HttpClient HttpClient = new(new SocketsHttpHandler - { - PooledConnectionLifetime = TimeSpan.FromMinutes(30), - EnableMultipleHttp2Connections = true - }) - { - DefaultRequestVersion = HttpVersion.Version20 // Fallback to HTTP/2 for compatibility - }; - private static readonly JsonSerializerOptions JsonOptions = new() - { - PropertyNamingPolicy = JsonNamingPolicy.CamelCase - }; - - public DeepSeekAIService(IConfiguration configuration) - { - _apiKey = configuration["DeepSeek:ApiKey"] ?? throw new ArgumentNullException("DeepSeek API key is missing."); - if (!HttpClient.DefaultRequestHeaders.Contains("Authorization")) - { - HttpClient.DefaultRequestHeaders.Clear(); - HttpClient.DefaultRequestHeaders.Add("Authorization", $"Bearer {_apiKey}"); - } - } - - public async Task CompleteAsync(IList chatMessages) - { - var requestBody = new DeepSeekChatRequest - { - Model = _modelName, - Temperature = 0.7f, // Controls response randomness (0.0 to 1.0) - Messages = chatMessages.Select(m => new DeepSeekMessage - { - Role = m.Role == ChatRole.User ? "user" : "system", // Align with DeepSeek API roles - Content = m.Text - }).ToList() - }; - - var content = new StringContent(JsonSerializer.Serialize(requestBody, JsonOptions), Encoding.UTF8, "application/json"); - - try - { - var response = await HttpClient.PostAsync(_endpoint, content); - response.EnsureSuccessStatusCode(); - var responseString = await response.Content.ReadAsStringAsync(); - var responseObject = JsonSerializer.Deserialize(responseString, JsonOptions); - return responseObject?.Choices?.FirstOrDefault()?.Message?.Content ?? "No response from DeepSeek."; - } - catch (Exception ex) when (ex is HttpRequestException || ex is JsonException) - { - throw new InvalidOperationException("Failed to communicate with DeepSeek API.", ex); - } - } -} -``` - -N> Store the DeepSeek API key in `appsettings.json` (e.g., `{ "DeepSeek": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security. - -## Define Request and Response Models - -Define C# classes to match the DeepSeek API’s JSON request and response format. - -1. Create a new file named `DeepSeekModels.cs` in the `Services` folder. -2. Add the following model classes: - -```csharp -public class DeepSeekMessage -{ - public string Role { get; set; } - public string Content { get; set; } -} - -public class DeepSeekChatRequest -{ - public string Model { get; set; } - public float Temperature { get; set; } - public List Messages { get; set; } -} - -public class DeepSeekChatResponse -{ - public List Choices { get; set; } -} - -public class DeepSeekChoice -{ - public DeepSeekMessage Message { get; set; } -} -``` - -## Create a Custom AI Service - -Implement the `IChatInferenceService` interface to connect the Smart Paste Button to the DeepSeek service, acting as a bridge for AI-generated responses. - -1. Create a new file named `DeepSeekInferenceService.cs` in the `Services` folder. -2. Add the following implementation: - -```csharp -using Syncfusion.EJ2.AI; -using System.Threading.Tasks; - -public class DeepSeekInferenceService : IChatInferenceService -{ - private readonly DeepSeekAIService _deepSeekService; - - public DeepSeekInferenceService(DeepSeekAIService deepSeekService) - { - _deepSeekService = deepSeekService; - } - - public async Task GenerateResponseAsync(ChatParameters options) - { - return await _deepSeekService.CompleteAsync(options.Messages); - } -} -``` - -## Configure the Blazor App - -Register the DeepSeek service and `IChatInferenceService` implementation in the dependency injection container. - -Update the **~/Program.cs** file as follows: - -```csharp -using Syncfusion.EJ2; -using Syncfusion.EJ2.AI; - -var builder = WebApplication.CreateBuilder(args); - -builder.Services.AddRazorPages(); -builder.Services.AddSyncfusionSmartComponents(); -builder.Services.AddSingleton(); -builder.Services.AddSingleton(); - -var app = builder.Build(); -// ... -``` - -## Add the Smart Paste Button - -Add the Smart Paste Button to a form in the **~/Pages/Index.cshtml** file to test the DeepSeek AI integration. - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -

Contact Form

-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- -
- - -
-
- - -
-
-
- - -
- - - -
- -
-
- I am John Doe from the United States. My email is johndoe@example.com, and my phone number is 555-123-4567. I’d like to inquire about your services and have a detailed discussion regarding your product offerings. Please contact me via email. I’m happy to subscribe to your newsletter for updates. Thank you! -
- -{% endhighlight %} -{% endtabs %} - -Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core -Smart Paste Button control will be rendered in the default web browser. - -![ASP.NET Core Smart Paste Button Control](images/SmartPaste.gif) - -## Troubleshooting - -If the DeepSeek AI integration does not work, try the following: -- **No Suggestions Displayed**: Verify that the DeepSeek API key and model name are correct in the configuration. Check the `DeepSeekAIService` implementation for errors. -- **HTTP Request Failures**: Ensure a stable internet connection and that the DeepSeek API endpoint (`https://api.deepseek.com/v1/chat/completions`) is accessible. Test with HTTP/2 if compatibility issues arise. -- **Service Registration Errors**: Confirm that `DeepSeekAIService` and `DeepSeekInferenceService` are registered in **Program.cs**. \ No newline at end of file diff --git a/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/gemini-service.md b/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/gemini-service.md deleted file mode 100644 index 2257eb586e..0000000000 --- a/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/gemini-service.md +++ /dev/null @@ -1,297 +0,0 @@ ---- -layout: post -title: Gemini AI in ##Platform_Name## Smart Paste Button Control | Syncfusion -description: Learn how to implement a custom AI service using Google's Gemini API with ##Platform_Name## Smart Paste Button control of Syncfusion Essential JS 2 and more details. -platform: ej2-asp-core-mvc -control: Gemini AI -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Gemini AI Integration with ASP.NET Core Smart Paste Button - -The Syncfusion ASP.NET Core SmartPaste Button control enables AI-powered, context-aware content pasting into forms, typically using OpenAI or Azure OpenAI. This guide explains how to integrate the Google Gemini AI service with the Smart Paste Button using the `IChatInferenceService` interface, enabling custom AI-driven responses in a ASP.NET Core Web App. - -## Setting Up Gemini - -1. **Obtain a Gemini API Key** - Visit [Google AI Studio](https://ai.google.dev/gemini-api/docs/api-key), sign in, and generate an API key. -2. **Review Model Specifications** - Refer to [Gemini Models Documentation](https://ai.google.dev/gemini-api/docs/models) for details on available models. - -## Create a Gemini AI Service - -Create a service class to manage interactions with the Gemini API, including authentication, request/response handling, and safety settings for the Smart Paste Button. - -1. Create a `Services` folder in your project. -2. Add a new file named `GeminiService.cs` in the `Services` folder. -3. Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., `appsettings.json`). - -```csharp -using System.Net; -using System.Text; -using System.Text.Json; -using Microsoft.Extensions.AI; - -public class GeminiService -{ - private readonly string _apiKey; - private readonly string _modelName = "gemini-2.0-flash"; // Example model - private readonly string _endpoint = "https://generativelanguage.googleapis.com/v1beta/models/"; - private static readonly HttpClient HttpClient = new(new SocketsHttpHandler - { - PooledConnectionLifetime = TimeSpan.FromMinutes(30), - EnableMultipleHttp2Connections = true - }) - { - DefaultRequestVersion = HttpVersion.Version20 // Fallback to HTTP/2 for compatibility - }; - private static readonly JsonSerializerOptions JsonOptions = new() - { - PropertyNamingPolicy = JsonNamingPolicy.CamelCase - }; - - public GeminiService(IConfiguration configuration) - { - _apiKey = configuration["Gemini:ApiKey"] ?? throw new ArgumentNullException("Gemini API key is missing."); - HttpClient.DefaultRequestHeaders.Clear(); - HttpClient.DefaultRequestHeaders.Add("x-goog-api-key", _apiKey); - } - - public async Task CompleteAsync(IList chatMessages) - { - var requestUri = $"{_endpoint}{_modelName}:generateContent"; - var parameters = BuildGeminiChatParameters(chatMessages); - var payload = new StringContent( - JsonSerializer.Serialize(parameters, JsonOptions), - Encoding.UTF8, - "application/json" - ); - - try - { - using var response = await HttpClient.PostAsync(requestUri, payload); - response.EnsureSuccessStatusCode(); - var json = await response.Content.ReadAsStringAsync(); - var result = JsonSerializer.Deserialize(json, JsonOptions); - return result?.Candidates?.FirstOrDefault()?.Content?.Parts?.FirstOrDefault()?.Text - ?? "No response from model."; - } - catch (Exception ex) when (ex is HttpRequestException or JsonException) - { - throw new InvalidOperationException("Gemini API error.", ex); - } - } - - private GeminiChatParameters BuildGeminiChatParameters(IList messages) - { - var contents = messages.Select(m => new ResponseContent( - m.Text, - m.Role == ChatRole.User ? "user" : "model" - )).ToList(); - - return new GeminiChatParameters - { - Contents = contents, - GenerationConfig = new GenerationConfig - { - MaxOutputTokens = 2000, - StopSequences = new List { "END_INSERTION", "NEED_INFO", "END_RESPONSE" } // Configurable stop sequences - }, - SafetySettings = new List - { - new() { Category = "HARM_CATEGORY_HARASSMENT", Threshold = "BLOCK_ONLY_HIGH" }, - new() { Category = "HARM_CATEGORY_HATE_SPEECH", Threshold = "BLOCK_ONLY_HIGH" }, - new() { Category = "HARM_CATEGORY_SEXUALLY_EXPLICIT", Threshold = "BLOCK_ONLY_HIGH" }, - new() { Category = "HARM_CATEGORY_DANGEROUS_CONTENT", Threshold = "BLOCK_ONLY_HIGH" } - } - }; - } -} -``` - -N> Store the Gemini API key in `appsettings.json` (e.g., `{ "Gemini": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security. The `SafetySettings` filter harmful content; adjust thresholds based on your application’s needs. - -## Define Request and Response Models - -Define C# classes to match the Gemini API’s JSON request and response format. - -1. Create a new file named `GeminiModels.cs` in the `Services` folder. -2. Add the following model classes: - -```csharp -public class Part -{ - public string Text { get; set; } -} - -public class Content -{ - public Part[] Parts { get; init; } = Array.Empty(); -} - -public class Candidate -{ - public Content Content { get; init; } = new(); -} - -public class GeminiResponseObject -{ - public Candidate[] Candidates { get; init; } = Array.Empty(); -} - -public class ResponseContent -{ - public List Parts { get; init; } - public string Role { get; init; } - - public ResponseContent(string text, string role) - { - Parts = new List { new Part { Text = text } }; - Role = role; - } -} - -public class GenerationConfig -{ - public int Temperature { get; init; } = 0; - public int TopK { get; init; } = 0; - public int TopP { get; init; } = 0; - public int MaxOutputTokens { get; init; } = 2048; - public List StopSequences { get; init; } = new(); -} - -public class SafetySetting -{ - public string Category { get; init; } = string.Empty; - public string Threshold { get; init; } = string.Empty; -} - -public class GeminiChatParameters -{ - public List Contents { get; init; } = new(); - public GenerationConfig GenerationConfig { get; init; } = new(); - public List SafetySettings { get; init; } = new(); -} -``` - -## Create a Custom AI Service - -Implement the `IChatInferenceService` interface to connect the Smart Paste Button to the Gemini service, acting as a bridge for AI-generated responses. - -1. Create a new file named `GeminiInferenceService.cs` in the `Services` folder. -2. Add the following implementation: - -```csharp -using Syncfusion.EJ2.AI; -using System.Threading.Tasks; - -public class GeminiInferenceService : IChatInferenceService -{ - private readonly GeminiService _geminiService; - - public GeminiInferenceService(GeminiService geminiService) - { - _geminiService = geminiService; - } - - public async Task GenerateResponseAsync(ChatParameters options) - { - return await _geminiService.CompleteAsync(options.Messages); - } -} -``` - -## Configure the ASP.NET Core App - -Register the Gemini service and `IChatInferenceService` implementation in the dependency injection container. - -Update the **~/Program.cs** file as follows: - -```csharp -using Syncfusion.EJ2; -using Syncfusion.EJ2.AI; - -builder.Services.AddRazorPages(); - -builder.Services.AddSyncfusionSmartComponents(); -builder.Services.AddSingleton(); -builder.Services.AddSingleton(); - -var app = builder.Build(); -// ... -``` - -## Add the Smart Paste Button - -Add the Smart Paste Button to a form in the **~/Pages/Index.cshtml** file to test the Gemini AI integration. - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -

Contact Form

-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- -
- - -
-
- - -
-
-
- - -
- - - -
- -
-
- I am John Doe from the United States. My email is johndoe@example.com, and my phone number is 555-123-4567. I’d like to inquire about your services and have a detailed discussion regarding your product offerings. Please contact me via email. I’m happy to subscribe to your newsletter for updates. Thank you! -
- -{% endhighlight %} -{% endtabs %} - -Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core -Smart Paste Button control will be rendered in the default web browser. - -![ASP.NET Core Smart Paste Button Control](images/SmartPaste.gif) - -## Troubleshooting - -If the Gemini AI integration does not work, try the following: -- **No Suggestions Displayed**: Verify that the Gemini API key and model name are correct in the configuration. Check the `GeminiService` implementation for errors. -- **HTTP Request Failures**: Ensure a stable internet connection and that the Gemini API endpoint (`https://generativelanguage.googleapis.com/v1beta/models/`) is accessible. Test with HTTP/2 if compatibility issues arise. -- **Service Registration Errors**: Confirm that `GeminiService` and `GeminiInferenceService` are registered in **Program.cs**. \ No newline at end of file diff --git a/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/getting-started.md b/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/getting-started.md deleted file mode 100644 index 6f736a385c..0000000000 --- a/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/getting-started.md +++ /dev/null @@ -1,285 +0,0 @@ ---- -layout: post -title: Getting Started with ##Platform_Name## Smart Paste Button | Syncfusion -description: Checkout and learn about getting started with ##Platform_Name## Smart Paste Button control of Syncfusion Essential JS 2 and more details. -platform: ej2-asp-core-mvc -control: Getting Started -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Getting Started with ASP.NET Core Smart Paste Button Control - -This section briefly explains about how to include `ASP.NET Core Smart Paste Button` control in your ASP.NET Core application using Visual Studio. - -## Prerequisites - -[System requirements for ASP.NET Core controls](https://ej2.syncfusion.com/aspnetcore/documentation/system-requirements) - -## Create ASP.NET Core web application with Razor pages - -* [Create a Project using Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-8.0&tabs=visual-studio#create-a-razor-pages-web-app) - -* [Create a Project using Syncfusion® ASP.NET Core Extension](https://ej2.syncfusion.com/aspnetcore/documentation/visual-studio-integration/create-project) - -## Install ASP.NET Core package in the application - -To add `ASP.NET Core` controls in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core/) and then install it. Alternatively, you can utilize the following package manager command to achieve the same. - -{% tabs %} -{% highlight C# tabtitle="Package Manager" %} - -Install-Package Syncfusion.EJ2.AspNet.Core -Version {{ site.releaseversion }} - -{% endhighlight %} -{% endtabs %} - -N> Syncfusion® ASP.NET Core controls are available in [nuget.org.](https://www.nuget.org/packages?q=syncfusion.EJ2) Refer to [NuGet packages topic](https://ej2.syncfusion.com/aspnetcore/documentation/nuget-packages) to learn more about installing NuGet packages in various OS environments. The Syncfusion.EJ2.AspNet.Core NuGet package has dependencies, [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json/) for JSON serialization and [Syncfusion.Licensing](https://www.nuget.org/packages/Syncfusion.Licensing/) for validating Syncfusion® license key. - -## Add Syncfusion® ASP.NET Core Tag Helper -Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelper. - -{% tabs %} -{% highlight C# tabtitle="~/_ViewImports.cshtml" %} - -@addTagHelper *, Syncfusion.EJ2 - -{% endhighlight %} -{% endtabs %} - -## Add stylesheet and script resources - -Here, the theme and script is referred using CDN inside the `` of `~/Pages/Shared/_Layout.cshtml` file as follows, - -{% tabs %} -{% highlight cshtml tabtitle="~/_Layout.cshtml" %} - - - ... - - - - - - -{% endhighlight %} -{% endtabs %} - -N> Checkout the [Themes topic](https://ej2.syncfusion.com/aspnetcore/documentation/appearance/theme) to learn different ways ([CDN](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references#cdn-reference), [NPM package](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references#node-package-manager-npm), and [CRG](https://ej2.syncfusion.com/aspnetcore/documentation/common/custom-resource-generator)) to refer styles in ASP.NET Core application, and to have the expected appearance for Syncfusion® ASP.NET Core controls. - -N> Checkout the [Adding Script Reference](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your ASP.NET Core application. - -## Register Syncfusion® Script Manager - -Also, register the script manager `` at the end of `` in the ASP.NET Core application as follows. - -{% tabs %} -{% highlight cshtml tabtitle="~/_Layout.cshtml" %} - - - ... - - - - -{% endhighlight %} -{% endtabs %} - -## Configure AI Service - -The Smart Paste Button requires an AI service (OpenAI, Azure OpenAI, or Ollama) to analyze and map copied text to form fields. Follow the instructions below to configure an AI model in your application. - -### Install AI Service NuGet Packages - -Install the following NuGet packages based on your chosen AI provider: - -{% tabs %} -{% highlight c# tabtitle="Package Manager" %} - -Install-Package Microsoft.Extensions.AI -Install-Package Microsoft.Extensions.AI.OpenAI -@* For Azure OpenAI only *@ -Install-Package Azure.AI.OpenAI -@* For Ollama only *@ -Install-Package OllamaSharp - -{% endhighlight %} -{% endtabs %} - -### OpenAI Configuration - -For OpenAI, obtain an API key from [OpenAI](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key) and specify the desired model (e.g., `gpt-3.5-turbo`, `gpt-4`). Store the API key securely in a configuration file or environment variable. - -Add the following to the **~/Program.cs** file: - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -using Microsoft.Extensions.AI; -using OpenAI; -using Syncfusion.EJ2; - - -builder.Services.AddRazorPages(); - -string openAIApiKey = "API-KEY"; -string openAIModel = "OPENAI_MODEL"; -OpenAIClient openAIClient = new OpenAIClient(openAIApiKey); -IChatClient openAIChatClient = openAIClient.GetChatClient(openAIModel).AsIChatClient(); -builder.Services.AddChatClient(openAIChatClient); - -builder.Services.AddSyncfusionSmartComponents() - .InjectOpenAIInference(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - -### Azure OpenAI Configuration - -For Azure OpenAI, deploy a resource and model as described in [Azure OpenAI documentation](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource). Obtain the API key, endpoint, and model name from your Azure portal. - -Add the following to the **~/Program.cs** file: - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -using Syncfusion.EJ2; -using Microsoft.Extensions.AI; -using Azure.AI.OpenAI; -using System.ClientModel; - -builder.Services.AddRazorPages(); - -string azureOpenAIKey = "AZURE_OPENAI_KEY"; -string azureOpenAIEndpoint = "AZURE_OPENAI_ENDPOINT"; -string azureOpenAIModel = "AZURE_OPENAI_MODEL"; -AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient( - new Uri(azureOpenAIEndpoint), - new ApiKeyCredential(azureOpenAIKey) -); -IChatClient azureOpenAIChatClient = azureOpenAIClient.GetChatClient(azureOpenAIModel).AsIChatClient(); -builder.Services.AddChatClient(azureOpenAIChatClient); - -builder.Services.AddSyncfusionSmartComponents() - .InjectOpenAIInference(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - -### Ollama Configuration - -To use Ollama for self-hosted models: - -1. Download and install Ollama from [Ollama's official website](https://ollama.com). -2. Install a model from the [Ollama Library](https://ollama.com/library) (e.g., `llama2:13b`, `mistral:7b`). -3. Configure the endpoint URL (e.g., `http://localhost:11434`) and model name. - -Add the following to the **~/Program.cs** file: - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -using Syncfusion.EJ2; -using Microsoft.Extensions.AI; -using OllamaSharp; - -builder.Services.AddRazorPages(); - -string ModelName = "MODEL_NAME"; -IChatClient chatClient = new OllamaApiClient("http://localhost:11434", ModelName); -builder.Services.AddChatClient(chatClient); - -builder.Services.AddSyncfusionSmartComponents() - .InjectOpenAIInference(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - -## Add ASP.NET Core Smart Paste Button Control - -Now, add the Syncfusion® ASP.NET Core Smart Paste Button tag helper in `~/Pages/Index.cshtml` page. - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -

Contact Form

-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- -
- - -
-
- - -
-
-
- - -
- - - -
- -
-
- I am John Doe from the United States. My email is johndoe@example.com, and my phone number is 555-123-4567. I’d like to inquire about your services and have a detailed discussion regarding your product offerings. Please contact me via email. I’m happy to subscribe to your newsletter for updates. Thank you! -
- -{% endhighlight %} -{% endtabs %} - -Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core -Smart Paste Button control will be rendered in the default web browser. - -![ASP.NET Core Smart Paste Button Control](images/SmartPaste.gif) - -## Performance Considerations - -For optimal performance with the Smart Paste Button: -- Use lightweight AI models (e.g., `gpt-3.5-turbo` or `mistral:7b`) for faster processing. -- Limit form complexity to reduce AI parsing time, especially for large datasets. -- Cache AI model responses where possible to minimize repeated API calls. - -## Troubleshooting Common Issues - -- **AI Service Configuration Errors**: Verify the API key, endpoint, and model name in `Program.cs`. Check for typos or incorrect values. -- **Network Failures**: Ensure a stable internet connection for OpenAI or Azure OpenAI. For Ollama, confirm the local server is running at the specified endpoint (e.g., `http://localhost:11434`). -- **Form Not Populating**: Confirm that the copied text matches the form field structure and that the AI model is correctly configured. diff --git a/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/groq-service.md b/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/groq-service.md deleted file mode 100644 index 20c3163380..0000000000 --- a/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/groq-service.md +++ /dev/null @@ -1,250 +0,0 @@ ---- -layout: post -title: Groq AI in ##Platform_Name## Smart Paste Button Control | Syncfusion -description: Learn how to implement a custom AI service using Groq AI with ##Platform_Name## Smart Paste Button control of Syncfusion Essential JS 2 and more details. -platform: ej2-asp-core-mvc -control: Groq AI -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Groq AI Integration with ASP.NET Core Smart Paste Button - -The Syncfusion ASP.NET Core Smart Paste Button control enables AI-powered, context-aware content pasting into forms, typically using OpenAI or Azure OpenAI. This guide explains how to integrate the Groq AI service with the Smart Paste Button using the `IChatInferenceService` interface, enabling custom AI-driven responses in a ASP.NET Core app. - -## Setting Up Groq - -1. **Create a Groq Account** - Visit [Groq Cloud Console](https://console.groq.com), sign up or sign in, and complete the verification process. -2. **Obtain an API Key** - Navigate to [API Keys](https://console.groq.com/keys) in the Groq Console and click "Create API Key." -3. **Review Model Specifications** - Refer to [Groq Models Documentation](https://console.groq.com/docs/models) for details on available models (e.g., `llama3-8b-8192`). - -## Create a Groq AI Service - -Create a service class to manage interactions with the Groq API, including authentication and response processing for the Smart Paste Button. - -1. Create a `Services` folder in your project. -2. Add a new file named `GroqService.cs` in the `Services` folder. -3. Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., `appsettings.json` or environment variables). - -```csharp -using Microsoft.Extensions.AI; -using System.Net; -using System.Text; -using System.Text.Json; - -public class GroqService -{ - private readonly string _apiKey; - private readonly string _modelName = "llama-3.3-70b-versatile"; // Example model - private readonly string _endpoint = "https://api.groq.com/openai/v1/chat/completions"; - private static readonly HttpClient HttpClient = new(new SocketsHttpHandler - { - PooledConnectionLifetime = TimeSpan.FromMinutes(30), - EnableMultipleHttp2Connections = true - }) - { - DefaultRequestVersion = HttpVersion.Version20 // Fallback to HTTP/2 for broader compatibility - }; - private static readonly JsonSerializerOptions JsonOptions = new() - { - PropertyNamingPolicy = JsonNamingPolicy.CamelCase - }; - - public GroqService(IConfiguration configuration) - { - _apiKey = configuration["Groq:ApiKey"] ?? throw new ArgumentNullException("Groq API key is missing."); - if (!HttpClient.DefaultRequestHeaders.Contains("Authorization")) - { - HttpClient.DefaultRequestHeaders.Clear(); - HttpClient.DefaultRequestHeaders.Add("Authorization", $"Bearer {_apiKey}"); - } - } - - public async Task CompleteAsync(IList chatMessages) - { - var requestPayload = new GroqChatParameters - { - Model = _modelName, - Messages = chatMessages.Select(m => new Message - { - Role = m.Role == ChatRole.User ? "user" : "assistant", - Content = m.Text - }).ToList(), - Stop = new List { "END_INSERTION", "NEED_INFO", "END_RESPONSE" } // Configurable stop sequences - }; - - var content = new StringContent(JsonSerializer.Serialize(requestPayload, JsonOptions), Encoding.UTF8, "application/json"); - - try - { - var response = await HttpClient.PostAsync(_endpoint, content); - response.EnsureSuccessStatusCode(); - var responseString = await response.Content.ReadAsStringAsync(); - var responseObject = JsonSerializer.Deserialize(responseString, JsonOptions); - return responseObject?.Choices?.FirstOrDefault()?.Message?.Content ?? "No response from model."; - } - catch (Exception ex) when (ex is HttpRequestException || ex is JsonException) - { - throw new InvalidOperationException("Failed to communicate with Groq API.", ex); - } - } -} -``` - -N> Store the Groq API key in `appsettings.json` (e.g., `{ "Groq": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security. - -## Define Request and Response Models - -Define C# classes to match the Groq API’s request and response format. - -1. Create a new file named `GroqModels.cs` in the `Services` folder. -2. Add the following model classes: - -```csharp -public class Choice -{ - public Message Message { get; set; } -} - -public class Message -{ - public string Role { get; set; } - public string Content { get; set; } -} - -public class GroqChatParameters -{ - public string Model { get; set; } - public List Messages { get; set; } - public List Stop { get; set; } -} - -public class GroqResponseObject -{ - public string Model { get; set; } - public List Choices { get; set; } -} -``` - -## Create a Custom AI Service - -Implement the `IChatInferenceService` interface to connect the Smart Paste Button to the Groq service. - -1. Create a new file named `GroqInferenceService.cs` in the `Services` folder. -2. Add the following implementation: - -```csharp -using Syncfusion.EJ2.AI; -using System.Threading.Tasks; - -public class GroqInferenceService : IChatInferenceService -{ - private readonly GroqService _groqService; - - public GroqInferenceService(GroqService groqService) - { - _groqService = groqService; - } - - public async Task GenerateResponseAsync(ChatParameters options) - { - return await _groqService.CompleteAsync(options.Messages); - } -} -``` - -## Configure the ASP.NET Core App - -Register the Groq service and `IChatInferenceService` implementation in the dependency injection container. - -Update the **~/Program.cs** file as follows: - -```csharp -using Syncfusion.EJ2; -using Syncfusion.EJ2.AI; - -builder.Services.AddRazorPages(); -builder.Services.AddSyncfusionSmartComponents(); -builder.Services.AddSingleton(); -builder.Services.AddSingleton(); - -var app = builder.Build(); -// ... -``` - -## Add the Smart Paste Button - -Add the Smart Paste Button to a form in the **~/Pages/Index.cshtml** file to test the Gemini AI integration. - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -

Contact Form

-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- -
- - -
-
- - -
-
-
- - -
- - - -
- -
-
- I am John Doe from the United States. My email is johndoe@example.com, and my phone number is 555-123-4567. I’d like to inquire about your services and have a detailed discussion regarding your product offerings. Please contact me via email. I’m happy to subscribe to your newsletter for updates. Thank you! -
- -{% endhighlight %} -{% endtabs %} - -Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core -Smart Paste Button control will be rendered in the default web browser. - -![ASP.NET Core Smart Paste Button Control](images/SmartPaste.gif) - -## Troubleshooting - -If the Groq AI integration does not work, try the following: -- **No Suggestions Displayed**: Verify that the Groq API key and model name are correct in the configuration. Check the `GroqService` implementation for errors. -- **HTTP Request Failures**: Ensure a stable internet connection and that the Groq API endpoint (`https://api.groq.com/openai/v1/chat/completions`) is accessible. Test with HTTP/2 instead of HTTP/3 if compatibility issues arise. -- **Service Registration Errors**: Confirm that `GroqService` and `GroqInferenceService` are registered in **Program.cs**. \ No newline at end of file diff --git a/ej2-asp-core-mvc/smart-paste/images/SmartPaste.gif b/ej2-asp-core-mvc/smart-paste/images/SmartPaste.gif deleted file mode 100644 index 0a177a1633..0000000000 Binary files a/ej2-asp-core-mvc/smart-paste/images/SmartPaste.gif and /dev/null differ diff --git a/ej2-asp-core-mvc/smart-paste/images/SmartPaste_Annotation.gif b/ej2-asp-core-mvc/smart-paste/images/SmartPaste_Annotation.gif deleted file mode 100644 index 28f361e143..0000000000 Binary files a/ej2-asp-core-mvc/smart-paste/images/SmartPaste_Annotation.gif and /dev/null differ diff --git a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/claude-service.md b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/claude-service.md deleted file mode 100644 index 828e8b673a..0000000000 --- a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/claude-service.md +++ /dev/null @@ -1,208 +0,0 @@ ---- -layout: post -title: Claude AI in ##Platform_Name## Smart TextArea Control | Syncfusion -description: Learn how to implement a custom AI service using Claude AI with ##Platform_Name## Smart TextArea control of Syncfusion Essential JS 2 and more details. -platform: ej2-asp-core-mvc -control: Claude AI -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Claude AI Integration with ASP.NET Core Smart TextArea - -The Syncfusion ASP.NET Core Smart TextArea control provides AI-powered autocompletion for context-aware text input, typically using OpenAI or Azure OpenAI. This guide explains how to integrate the Anthropic Claude AI service with the Smart TextArea using the `IChatInferenceService` interface, enabling custom AI-driven responses in a ASP.NET Core App. - -## Setting Up Claude - -1. **Create an Anthropic Account** - Visit [Anthropic Console](https://console.anthropic.com), sign up, and complete the verification process. -2. **Obtain an API Key** - Navigate to [API Keys](https://console.anthropic.com/settings/keys) and click "Create Key." -3. **Review Model Specifications** - Refer to [Claude Models Documentation](https://docs.anthropic.com/claude/docs/models-overview) for details on available models. - -## Create a Claude AI Service - -Create a service class to manage interactions with the Claude API, including authentication and response processing for the Smart TextArea. - -1. Create a `Services` folder in your project. -2. Add a new file named `ClaudeAIService.cs` in the `Services` folder. -3. Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., `appsettings.json`). - -```csharp -using Microsoft.Extensions.AI; -using System.Net; -using System.Text; -using System.Text.Json; - -public class ClaudeAIService -{ - private readonly string _apiKey; - private readonly string _modelName = "claude-3-5-sonnet-20241022"; // Example model - private readonly string _endpoint = "https://api.anthropic.com/v1/messages"; - private static readonly HttpClient HttpClient = new(new SocketsHttpHandler - { - PooledConnectionLifetime = TimeSpan.FromMinutes(30), - EnableMultipleHttp2Connections = true - }) - { - DefaultRequestVersion = HttpVersion.Version20 // Fallback to HTTP/2 for compatibility - }; - private static readonly JsonSerializerOptions JsonOptions = new() - { - PropertyNamingPolicy = JsonNamingPolicy.CamelCase - }; - - public ClaudeAIService(IConfiguration configuration) - { - _apiKey = configuration["Claude:ApiKey"] ?? throw new ArgumentNullException("Claude API key is missing."); - if (!HttpClient.DefaultRequestHeaders.Contains("x-api-key")) - { - HttpClient.DefaultRequestHeaders.Clear(); - HttpClient.DefaultRequestHeaders.Add("x-api-key", _apiKey); - HttpClient.DefaultRequestHeaders.Add("anthropic-version", "2023-06-01"); // Check latest version in Claude API docs - } - } - - public async Task CompleteAsync(IList chatMessages) - { - var requestBody = new ClaudeChatRequest - { - Model = _modelName, - Max_tokens = 1000, // Maximum tokens in response - Messages = chatMessages.Select(m => new ClaudeMessage - { - Role = m.Role == ChatRole.User ? "user" : "assistant", - Content = m.Text - }).ToList(), - Stop_sequences = new List { "END_INSERTION", "NEED_INFO", "END_RESPONSE" } // Configurable stop sequences - }; - - var content = new StringContent(JsonSerializer.Serialize(requestBody, JsonOptions), Encoding.UTF8, "application/json"); - - try - { - var response = await HttpClient.PostAsync(_endpoint, content); - response.EnsureSuccessStatusCode(); - var responseString = await response.Content.ReadAsStringAsync(); - var responseObject = JsonSerializer.Deserialize(responseString, JsonOptions); - return responseObject?.Content?.FirstOrDefault()?.Text ?? "No response from Claude model."; - } - catch (Exception ex) when (ex is HttpRequestException || ex is JsonException) - { - throw new InvalidOperationException("Failed to communicate with Claude API.", ex); - } - } -} -``` - -N> Store the Claude API key in `appsettings.json` (e.g., `{ "Claude": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security. Verify the `anthropic-version` header in [Claude API Documentation](https://docs.anthropic.com/claude/docs) for the latest version. - -## Define Request and Response Models - -Define C# classes to match the Claude API’s JSON request and response format. - -1. Create a new file named `ClaudeModels.cs` in the `Services` folder. -2. Add the following model classes: - -```csharp -public class ClaudeChatRequest -{ - public string Model { get; set; } - public int Max_tokens { get; set; } - public List Messages { get; set; } - public List Stop_sequences { get; set; } -} - -public class ClaudeMessage -{ - public string Role { get; set; } - public string Content { get; set; } -} - -public class ClaudeChatResponse -{ - public List Content { get; set; } -} - -public class ClaudeContentBlock -{ - public string Text { get; set; } -} -``` - -## Create a Custom AI Service - -Implement the `IChatInferenceService` interface to connect the Smart TextArea to the Claude service, acting as a bridge for AI-generated responses. - -1. Create a new file named `ClaudeInferenceService.cs` in the `Services` folder. -2. Add the following implementation: - -```csharp -using Syncfusion.EJ2.AI; -using System.Threading.Tasks; - -public class ClaudeInferenceService : IChatInferenceService -{ - private readonly ClaudeAIService _claudeService; - - public ClaudeInferenceService(ClaudeAIService claudeService) - { - _claudeService = claudeService; - } - - public async Task GenerateResponseAsync(ChatParameters options) - { - return await _claudeService.CompleteAsync(options.Messages); - } -} -``` - -## Configure the ASP.NET Core App - -Register the Claude service and `IChatInferenceService` implementation in the dependency injection container. - -Update the **~/Program.cs** file as follows: - -```csharp -using Syncfusion.EJ2.AI; - -builder.Services.AddRazorPages(); -builder.Services.AddSyncfusionSmartComponents(); -builder.Services.AddSingleton(); -builder.Services.AddSingleton(); - -var app = builder.Build(); -// ... -``` - -## Add ASP.NET Core Smart TextArea Control - -Add the Smart TextArea in the **~/Pages/Index.cshtml** file to test the Claude AI integration. - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -@{ - var presets = new { - userRole = "Maintainer of an open-source project replying to GitHub issues", - userPhrases = new[] { "Thank you for contacting us.", "To investigate, we'll need a repro as a public Git repo.", "Could you please post a screenshot of NEED_INFO?", "This sounds like a usage question. This issue tracker is intended for bugs and feature proposals. Unfortunately, we don't have the capacity to answer general usage questions and would recommend StackOverflow for a faster response.", "We don't accept ZIP files as repros." }, - placeHolder = "Write your response to the GitHub issue..." }; -} - - - -{% endhighlight %} -{% endtabs %} - -Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core -Smart TextArea control will be rendered in the default web browser. - -![ASP.NET Core Smart TextArea Control](images/SmartTextArea.gif) - -## Troubleshooting - -If the Claude AI integration does not work, try the following: -- **No Suggestions Displayed**: Verify that the Claude API key and model name are correct in the configuration. Check the `ClaudeAIService` implementation for errors. -- **HTTP Request Failures**: Ensure a stable internet connection and that the Claude API endpoint (`https://api.anthropic.com/v1/messages`) is accessible. Test with HTTP/2 if compatibility issues arise. -- **Service Registration Errors**: Confirm that `ClaudeAIService` and `ClaudeInferenceService` are registered in **Program.cs**. diff --git a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/custom-inference-backend.md b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/custom-inference-backend.md deleted file mode 100644 index 083a4f2c9e..0000000000 --- a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/custom-inference-backend.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -layout: post -title: Custom AI with ##Platform_Name## Smart TextArea Control | Syncfusion -description: Learn how to integrate custom AI services with ##Platform_Name## Smart TextArea control of Syncfusion Essential JS 2 and more details. -platform: ej2-asp-core-mvc -control: Custom AI Service -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Custom AI Service Integration with ASP.NET Core Smart TextArea - -The Syncfusion ASP.NET Core Smart TextArea control leverages AI to provide context-aware autocompletion, typically using OpenAI or Azure OpenAI services. Developers can integrate custom AI services using the `IChatInferenceService` interface, which standardizes communication between the Smart TextArea and third-party AI providers. This section explains how to implement and register a custom AI service for the Smart TextArea. - -## IChatInferenceService Interface - -The `IChatInferenceService` interface defines a contract for integrating custom AI services with Syncfusion Smart Controls. It enables the Smart TextArea to request and receive AI-generated responses. - -```csharp -public interface IChatInferenceService -{ - Task GenerateResponseAsync(ChatParameters options); -} -``` - -- **Purpose**: Standardizes communication for AI-generated responses. -- **Parameters**: The `ChatParameters` type includes properties like user input and context. -- **Benefits**: Enables seamless switching between AI providers without modifying component code. - -## Simple Implementation of a Custom AI Service - -Below is a sample implementation of a mock AI service named `MockAIService`. This service demonstrates how to implement the `IChatInferenceService` interface by returning sample, context-aware responses. You can replace the logic with your own AI integration. - -```csharp -using Syncfusion.EJ2.AI; -using System.Threading.Tasks; - -public class MockAIService : IChatInferenceService -{ - public Task GenerateResponseAsync(ChatParameters options) - { - - } -} -``` - -## Registering the Custom AI Service - -Register the custom AI service in the **~/Program.cs** file of your ASP.NET Core Application: - -```csharp -using Syncfusion.EJ2; -using Syncfusion.EJ2.AI; - -builder.Services.AddRazorPages(); -builder.Services.AddSyncfusionSmartComponents(); -builder.Services.AddSingleton(); - -var app = builder.Build(); -// ... -``` - -## Implemented AI Services - -Here are examples of AI services integrated using the `IChatInferenceService` interface: - -| Service | Documentation | -|---------|---------------| -| Claude | [Claude Integration](claude-service) | -| DeepSeek | [DeepSeek Integration](deepseek-service) | -| Groq | [Groq Integration](groq-service) | -| Gemini | [Gemini Integration](gemini-service) | - -## Troubleshooting - -If the custom AI service does not work as expected, try the following: -- **No Suggestions Displayed**: Ensure the `IChatInferenceService` implementation is registered in **Program.cs** and returns valid responses. Check for errors in the `GenerateResponseAsync` method. -- **Dependency Issues**: Verify that all required NuGet packages are installed. Run `dotnet restore` to resolve dependencies. -- **Incorrect Responses**: Debug the custom AI service implementation to ensure it processes `ChatParameters` correctly and returns expected responses. - diff --git a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/customization.md b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/customization.md deleted file mode 100644 index b0c3341f63..0000000000 --- a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/customization.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -layout: post -title: Customize Suggestions ##Platform_Name## Smart TextArea Control | Syncfusion -description: Learn how to customize suggestion display in ##Platform_Name## Smart TextArea of Syncfusion Essential JS 2 and more details. -platform: ej2-asp-core-mvc -control: Customizaion -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Customize Suggestions in ASP.NET Core Smart TextArea - -The Syncfusion ASP.NET Core Smart TextArea control provides AI-powered autocompletion for context-aware text input, with customizable suggestion display options. This section explains how to configure the appearance and behavior of suggestions to enhance user experience in applications like issue trackers or customer support systems. - -## Configure Suggestion Display - -The `show-suggestion-on-popup` attribute controls how AI-generated suggestions are presented to users in the Smart TextArea control. Suggestions are based on the `user-role` and optional `user-phrases` attributes, which define the context and predefined phrases for autocompletion. - -### Pop-up Suggestions - -Set `show-suggestion-on-popup="true"` to display suggestions in a pop-up window above the text area, ideal for scenarios where users need to select from multiple suggestions without cluttering the input area. - -Add the following code in the `~/Pages/Index.cshtml`: - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -@{ - var presets = new { - userRole = "Maintainer of an open-source project replying to GitHub issues", - userPhrases = new[] { "Thank you for contacting us.", "To investigate, we'll need a repro as a public Git repo.", "Could you please post a screenshot of NEED_INFO?", "This sounds like a usage question. This issue tracker is intended for bugs and feature proposals. Unfortunately, we don't have the capacity to answer general usage questions and would recommend StackOverflow for a faster response.", "We don't accept ZIP files as repros." }, - placeHolder = "Write your response to the GitHub issue..." }; -} - - - -{% endhighlight %} -{% endtabs %} - -![ASP.NET Core Smart TextArea Control Suggestion on popup](images/SmartTextArea-Popup.gif) - -### Inline Suggestions - -Set `show-suggestion-on-popup="false"` (default) to display suggestions inline within the text area, suitable for seamless text entry where users can accept suggestions by continuing to type or pressing a tab key. - -Add the following code in the `~/Pages/Index.cshtml`: - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -@{ - var presets = new { - userRole = "Maintainer of an open-source project replying to GitHub issues", - userPhrases = new[] { "Thank you for contacting us.", "To investigate, we'll need a repro as a public Git repo.", "Could you please post a screenshot of NEED_INFO?", "This sounds like a usage question. This issue tracker is intended for bugs and feature proposals. Unfortunately, we don't have the capacity to answer general usage questions and would recommend StackOverflow for a faster response.", "We don't accept ZIP files as repros." }, - placeHolder = "Write your response to the GitHub issue..." }; -} - - - -{% endhighlight %} -{% endtabs %} - -![ASP.NET Core Smart TextArea Control Suggestion on inline](images/SmartTextArea-Inline.gif) - -## Troubleshooting - -If suggestions do not appear, try the following: -- **AI Configuration Errors**: Verify that the API key, endpoint, and model name are correctly configured in **Program.cs**. Check for typos or invalid credentials. \ No newline at end of file diff --git a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/deepseek-service.md b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/deepseek-service.md deleted file mode 100644 index ed2bb4c284..0000000000 --- a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/deepseek-service.md +++ /dev/null @@ -1,206 +0,0 @@ ---- -layout: post -title: DeepSeek AI in ##Platform_Name## Smart TextArea Control | Syncfusion -description: Learn how to implement a custom AI service using DeepSeek AI with ##Platform_Name## Smart TextArea control of Syncfusion Essential JS 2 and more details. -platform: ej2-asp-core-mvc -control: DeepSeek AI -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# DeepSeek AI Integration with ASP.NET Core Smart TextArea - -The Syncfusion ASP.NET Core Smart TextArea control provides AI-powered autocompletion for context-aware text input, typically using OpenAI or Azure OpenAI. This guide explains how to integrate the DeepSeek AI service with the Smart TextArea using the `IChatInferenceService` interface, enabling custom AI-driven responses in a ASP.NET Core App. - -## Setting Up DeepSeek - -1. **Obtain a DeepSeek API Key** - Create an account at [DeepSeek Platform](https://platform.deepseek.com), sign in, and navigate to [API Keys](https://platform.deepseek.com/api_keys) to generate an API key. -2. **Review Model Specifications** - Refer to [DeepSeek Models Documentation](https://api-docs.deepseek.com/quick_start/pricing) for details on available models (e.g., `deepseek-chat`). - -## Create a DeepSeek AI Service - -Implement the `IChatInferenceService` interface to connect the Smart TextArea to the DeepSeek service, acting as a bridge for AI-generated responses. - -1. Create a `Services` folder in your project. -2. Add a new file named `DeepSeekAIService.cs` in the `Services` folder. -3. Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., `appsettings.json`). - -```csharp -using System.Net; -using System.Text; -using System.Text.Json; -using Microsoft.Extensions.AI; - -public class DeepSeekAIService -{ - private readonly string _apiKey; - private readonly string _modelName = "deepseek-chat"; // Example model - private readonly string _endpoint = "https://api.deepseek.com/chat/completions"; - private static readonly HttpClient HttpClient = new(new SocketsHttpHandler - { - PooledConnectionLifetime = TimeSpan.FromMinutes(30), - EnableMultipleHttp2Connections = true - }) - { - DefaultRequestVersion = HttpVersion.Version20 // Fallback to HTTP/2 for compatibility - }; - private static readonly JsonSerializerOptions JsonOptions = new() - { - PropertyNamingPolicy = JsonNamingPolicy.CamelCase - }; - - public DeepSeekAIService(IConfiguration configuration) - { - _apiKey = configuration["DeepSeek:ApiKey"] ?? throw new ArgumentNullException("DeepSeek API key is missing."); - if (!HttpClient.DefaultRequestHeaders.Contains("Authorization")) - { - HttpClient.DefaultRequestHeaders.Clear(); - HttpClient.DefaultRequestHeaders.Add("Authorization", $"Bearer {_apiKey}"); - } - } - - public async Task CompleteAsync(IList chatMessages) - { - var requestBody = new DeepSeekChatRequest - { - Model = _modelName, - Temperature = 0.7f, // Controls response randomness (0.0 to 1.0) - Messages = chatMessages.Select(m => new DeepSeekMessage - { - Role = m.Role == ChatRole.User ? "user" : "system", // Align with DeepSeek API roles - Content = m.Text - }).ToList() - }; - - var content = new StringContent(JsonSerializer.Serialize(requestBody, JsonOptions), Encoding.UTF8, "application/json"); - - try - { - var response = await HttpClient.PostAsync(_endpoint, content); - response.EnsureSuccessStatusCode(); - var responseString = await response.Content.ReadAsStringAsync(); - var responseObject = JsonSerializer.Deserialize(responseString, JsonOptions); - return responseObject?.Choices?.FirstOrDefault()?.Message?.Content ?? "No response from DeepSeek."; - } - catch (Exception ex) when (ex is HttpRequestException || ex is JsonException) - { - throw new InvalidOperationException("Failed to communicate with DeepSeek API.", ex); - } - } -} -``` - -N> Store the DeepSeek API key in `appsettings.json` (e.g., `{ "DeepSeek": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security. - -## Define Request and Response Models - -Define C# classes to match the DeepSeek API’s JSON request and response format. - -1. Create a new file named `DeepSeekModels.cs` in the `Services` folder. -2. Add the following model classes: - -```csharp -public class DeepSeekMessage -{ - public string Role { get; set; } - public string Content { get; set; } -} - -public class DeepSeekChatRequest -{ - public string Model { get; set; } - public float Temperature { get; set; } - public List Messages { get; set; } -} - -public class DeepSeekChatResponse -{ - public List Choices { get; set; } -} - -public class DeepSeekChoice -{ - public DeepSeekMessage Message { get; set; } -} -``` - -## Create a Custom AI Service - -Implement the `IChatInferenceService` interface to connect the Smart TextArea to the DeepSeek service, acting as a bridge for AI-generated responses. - -1. Create a new file named `DeepSeekInferenceService.cs` in the `Services` folder. -2. Add the following implementation: - -```csharp -using Syncfusion.EJ2.AI; -using System.Threading.Tasks; - -public class DeepSeekInferenceService : IChatInferenceService -{ - private readonly DeepSeekAIService _deepSeekService; - - public DeepSeekInferenceService(DeepSeekAIService deepSeekService) - { - _deepSeekService = deepSeekService; - } - - public async Task GenerateResponseAsync(ChatParameters options) - { - return await _deepSeekService.CompleteAsync(options.Messages); - } -} -``` - -## Configure the ASP.NET Core App - -Register the DeepSeek service and `IChatInferenceService` implementation in the dependency injection container. - -Update the **~/Program.cs** file as follows: - -```csharp -using Syncfusion.EJ2; -using Syncfusion.EJ2.AI; - -var builder = WebApplication.CreateBuilder(args); - -builder.Services.AddRazorPages(); -builder.Services.AddSyncfusionSmartComponents(); -builder.Services.AddSingleton(); -builder.Services.AddSingleton(); - -var app = builder.Build(); -// ... -``` - -## Add ASP.NET Core Smart TextArea Control - -Add the Smart TextArea in the **~/Pages/Index.cshtml** file to test the DeepSeek AI integration. - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -@{ - var presets = new { - userRole = "Maintainer of an open-source project replying to GitHub issues", - userPhrases = new[] { "Thank you for contacting us.", "To investigate, we'll need a repro as a public Git repo.", "Could you please post a screenshot of NEED_INFO?", "This sounds like a usage question. This issue tracker is intended for bugs and feature proposals. Unfortunately, we don't have the capacity to answer general usage questions and would recommend StackOverflow for a faster response.", "We don't accept ZIP files as repros." }, - placeHolder = "Write your response to the GitHub issue..." }; -} - - - -{% endhighlight %} -{% endtabs %} - -Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core -Smart TextArea control will be rendered in the default web browser. - -![ASP.NET Core Smart TextArea Control](images/SmartTextArea.gif) - -## Troubleshooting - -If the DeepSeek AI integration does not work, try the following: -- **No Suggestions Displayed**: Verify that the DeepSeek API key and model name are correct in the configuration. Check the `DeepSeekAIService` implementation for errors. -- **HTTP Request Failures**: Ensure a stable internet connection and that the DeepSeek API endpoint (`https://api.deepseek.com/v1/chat/completions`) is accessible. Test with HTTP/2 if compatibility issues arise. -- **Service Registration Errors**: Confirm that `DeepSeekAIService` and `DeepSeekInferenceService` are registered in **Program.cs**. diff --git a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/features.md b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/features.md deleted file mode 100644 index 2120fa3d33..0000000000 --- a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/features.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -layout: post -title: Styles and Appearances in ##Platform_Name## Smart TextArea | Syncfusion -description: Checkout and learn here all about Styles and Appearances in ##Platform_Name## Smart TextArea of Syncfusion Essential JS 2 and more details. -platform: ej2-asp-core-mvc -control: Features -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Inherited Features from TextArea - -The Syncfusion® ASP.NET Core Smart TextArea control fully inherits all the properties, features, and styling options of the Syncfusion® ASP.NET Core TextArea control. This means that you can leverage the existing features of the Syncfusion® ASP.NET Core TextArea while benefiting from the enhanced functionality of the Smart TextArea. - -* [Form Support](https://ej2.syncfusion.com/aspnetcore/documentation/textarea/form-support) -* [Floating Labels](https://ej2.syncfusion.com/aspnetcore/documentation/textarea/floating-label) -* [Events](https://ej2.syncfusion.com/aspnetcore/documentation/textarea/events) -* [Methods](https://ej2.syncfusion.com/aspnetcore/documentation/textarea/methods) -* [Style and Appearance](https://ej2.syncfusion.com/aspnetcore/documentation/textarea/style-appearance) \ No newline at end of file diff --git a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/gemini-service.md b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/gemini-service.md deleted file mode 100644 index 19984f4ebe..0000000000 --- a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/gemini-service.md +++ /dev/null @@ -1,255 +0,0 @@ ---- -layout: post -title: Gemini AI in ##Platform_Name## Smart TextArea Control | Syncfusion -description: Learn how to implement a custom AI service using Google's Gemini AI with ##Platform_Name## Smart TextArea control of Syncfusion Essential JS 2 and more details. -platform: ej2-asp-core-mvc -control: Gemini AI -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Gemini AI Integration with ASP.NET Core Smart TextArea - -The Syncfusion ASP.NET Core Smart TextArea control provides AI-powered autocompletion for context-aware text input, typically using OpenAI or Azure OpenAI. This guide explains how to integrate the Google Gemini AI service with the Smart TextArea using the `IChatInferenceService` interface, enabling custom AI-driven responses in a ASP.NET Core Web App. - -## Setting Up Gemini - -1. **Obtain a Gemini API Key** - Visit [Google AI Studio](https://ai.google.dev/gemini-api/docs/api-key), sign in, and generate an API key. -2. **Review Model Specifications** - Refer to [Gemini Models Documentation](https://ai.google.dev/gemini-api/docs/models) for details on available models. - -## Create a Gemini AI Service - -Create a service class to manage interactions with the Gemini API, including authentication, request/response handling, and safety settings for the Smart TextArea. - -1. Create a `Services` folder in your project. -2. Add a new file named `GeminiService.cs` in the `Services` folder. -3. Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., `appsettings.json`). - - -```csharp -using System.Net; -using System.Text; -using System.Text.Json; -using Microsoft.Extensions.AI; - -public class GeminiService -{ - private readonly string _apiKey; - private readonly string _modelName = "gemini-2.0-flash"; // Example model - private readonly string _endpoint = "https://generativelanguage.googleapis.com/v1beta/models/"; - private static readonly HttpClient HttpClient = new(new SocketsHttpHandler - { - PooledConnectionLifetime = TimeSpan.FromMinutes(30), - EnableMultipleHttp2Connections = true - }) - { - DefaultRequestVersion = HttpVersion.Version20 // Fallback to HTTP/2 for compatibility - }; - private static readonly JsonSerializerOptions JsonOptions = new() - { - PropertyNamingPolicy = JsonNamingPolicy.CamelCase - }; - - public GeminiService(IConfiguration configuration) - { - _apiKey = configuration["Gemini:ApiKey"] ?? throw new ArgumentNullException("Gemini API key is missing."); - HttpClient.DefaultRequestHeaders.Clear(); - HttpClient.DefaultRequestHeaders.Add("x-goog-api-key", _apiKey); - } - - public async Task CompleteAsync(IList chatMessages) - { - var requestUri = $"{_endpoint}{_modelName}:generateContent"; - var parameters = BuildGeminiChatParameters(chatMessages); - var payload = new StringContent( - JsonSerializer.Serialize(parameters, JsonOptions), - Encoding.UTF8, - "application/json" - ); - - try - { - using var response = await HttpClient.PostAsync(requestUri, payload); - response.EnsureSuccessStatusCode(); - var json = await response.Content.ReadAsStringAsync(); - var result = JsonSerializer.Deserialize(json, JsonOptions); - return result?.Candidates?.FirstOrDefault()?.Content?.Parts?.FirstOrDefault()?.Text - ?? "No response from model."; - } - catch (Exception ex) when (ex is HttpRequestException or JsonException) - { - throw new InvalidOperationException("Gemini API error.", ex); - } - } - - private GeminiChatParameters BuildGeminiChatParameters(IList messages) - { - var contents = messages.Select(m => new ResponseContent( - m.Text, - m.Role == ChatRole.User ? "user" : "model" - )).ToList(); - - return new GeminiChatParameters - { - Contents = contents, - GenerationConfig = new GenerationConfig - { - MaxOutputTokens = 2000, - StopSequences = new List { "END_INSERTION", "NEED_INFO", "END_RESPONSE" } // Configurable stop sequences - }, - SafetySettings = new List - { - new() { Category = "HARM_CATEGORY_HARASSMENT", Threshold = "BLOCK_ONLY_HIGH" }, - new() { Category = "HARM_CATEGORY_HATE_SPEECH", Threshold = "BLOCK_ONLY_HIGH" }, - new() { Category = "HARM_CATEGORY_SEXUALLY_EXPLICIT", Threshold = "BLOCK_ONLY_HIGH" }, - new() { Category = "HARM_CATEGORY_DANGEROUS_CONTENT", Threshold = "BLOCK_ONLY_HIGH" } - } - }; - } -} -``` - -N> Store the Gemini API key in `appsettings.json` (e.g., `{ "Gemini": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security. The `SafetySettings` filter harmful content; adjust thresholds based on your application’s needs. - -## Define Request and Response Models - -Define C# classes to match the Gemini API’s JSON request and response format. - -1. Create a new file named `GeminiModels.cs` in the `Services` folder. -2. Add the following model classes: - -```csharp -public class Part -{ - public string Text { get; set; } -} - -public class Content -{ - public Part[] Parts { get; init; } = Array.Empty(); -} - -public class Candidate -{ - public Content Content { get; init; } = new(); -} - -public class GeminiResponseObject -{ - public Candidate[] Candidates { get; init; } = Array.Empty(); -} - -public class ResponseContent -{ - public List Parts { get; init; } - public string Role { get; init; } - - public ResponseContent(string text, string role) - { - Parts = new List { new Part { Text = text } }; - Role = role; - } -} - -public class GenerationConfig -{ - public int Temperature { get; init; } = 0; - public int TopK { get; init; } = 0; - public int TopP { get; init; } = 0; - public int MaxOutputTokens { get; init; } = 2048; - public List StopSequences { get; init; } = new(); -} - -public class SafetySetting -{ - public string Category { get; init; } = string.Empty; - public string Threshold { get; init; } = string.Empty; -} - -public class GeminiChatParameters -{ - public List Contents { get; init; } = new(); - public GenerationConfig GenerationConfig { get; init; } = new(); - public List SafetySettings { get; init; } = new(); -} -``` - -## Create a Custom AI Service - -Implement the `IChatInferenceService` interface to connect the Smart TextArea to the Gemini service, acting as a bridge for AI-generated responses. - -1. Create a new file named `GeminiInferenceService.cs` in the `Services` folder. -2. Add the following implementation: - -```csharp -using Syncfusion.EJ2.AI; -using System.Threading.Tasks; - -public class GeminiInferenceService : IChatInferenceService -{ - private readonly GeminiService _geminiService; - - public GeminiInferenceService(GeminiService geminiService) - { - _geminiService = geminiService; - } - - public async Task GenerateResponseAsync(ChatParameters options) - { - return await _geminiService.CompleteAsync(options.Messages); - } -} -``` - -## Configure the ASP.NET Core App - -Register the Gemini service and `IChatInferenceService` implementation in the dependency injection container. - -Update the **~/Program.cs** file as follows: - -```csharp -using Syncfusion.EJ2; -using Syncfusion.EJ2.AI; - -builder.Services.AddRazorPages(); - -builder.Services.AddSyncfusionSmartComponents(); -builder.Services.AddSingleton(); -builder.Services.AddSingleton(); - -var app = builder.Build(); -// ... -``` - -## Add ASP.NET Core Smart TextArea Control - -Add the Smart TextArea in the **~/Pages/Index.cshtml** file to test the Gemini AI integration. - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -@{ - var presets = new { - userRole = "Maintainer of an open-source project replying to GitHub issues", - userPhrases = new[] { "Thank you for contacting us.", "To investigate, we'll need a repro as a public Git repo.", "Could you please post a screenshot of NEED_INFO?", "This sounds like a usage question. This issue tracker is intended for bugs and feature proposals. Unfortunately, we don't have the capacity to answer general usage questions and would recommend StackOverflow for a faster response.", "We don't accept ZIP files as repros." }, - placeHolder = "Write your response to the GitHub issue..." }; -} - - - -{% endhighlight %} -{% endtabs %} - -Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core -Smart TextArea control will be rendered in the default web browser. - -![ASP.NET Core Smart TextArea Control](images/SmartTextArea.gif) - -## Troubleshooting - -If the Gemini AI integration does not work, try the following: -- **No Suggestions Displayed**: Verify that the Gemini API key and model name are correct in the configuration. Check the `GeminiService` implementation for errors. -- **HTTP Request Failures**: Ensure a stable internet connection and that the Gemini API endpoint (`https://generativelanguage.googleapis.com/v1beta/models/`) is accessible. Test with HTTP/2 if compatibility issues arise. -- **Service Registration Errors**: Confirm that `GeminiService` and `GeminiInferenceService` are registered in **Program.cs**. diff --git a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/getting-started.md b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/getting-started.md deleted file mode 100644 index 227a08d68d..0000000000 --- a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/getting-started.md +++ /dev/null @@ -1,237 +0,0 @@ ---- -layout: post -title: Getting Started with ##Platform_Name## Smart TextArea Control | Syncfusion -description: Checkout and learn about getting started with ##Platform_Name## Smart TextArea of Syncfusion Essential JS 2 and more details. -platform: ej2-asp-core-mvc -control: Getting Started -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Getting Started with ASP.NET Core Smart TextArea Control - -This section briefly explains about how to include `ASP.NET Core Smart TextArea` control in your ASP.NET Core application using Visual Studio. - -## Prerequisites - -[System requirements for ASP.NET Core controls](https://ej2.syncfusion.com/aspnetcore/documentation/system-requirements) - -## Create ASP.NET Core web application with Razor pages - -* [Create a Project using Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-8.0&tabs=visual-studio#create-a-razor-pages-web-app) - -* [Create a Project using Syncfusion® ASP.NET Core Extension](https://ej2.syncfusion.com/aspnetcore/documentation/visual-studio-integration/create-project) - -## Install ASP.NET Core package in the application - -To add `ASP.NET Core` controls in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core/) and then install it. Alternatively, you can utilize the following package manager command to achieve the same. - -{% tabs %} -{% highlight C# tabtitle="Package Manager" %} - -Install-Package Syncfusion.EJ2.AspNet.Core -Version {{ site.releaseversion }} - -{% endhighlight %} -{% endtabs %} - -N> Syncfusion® ASP.NET Core controls are available in [nuget.org.](https://www.nuget.org/packages?q=syncfusion.EJ2) Refer to [NuGet packages topic](https://ej2.syncfusion.com/aspnetcore/documentation/nuget-packages) to learn more about installing NuGet packages in various OS environments. The Syncfusion.EJ2.AspNet.Core NuGet package has dependencies, [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json/) for JSON serialization and [Syncfusion.Licensing](https://www.nuget.org/packages/Syncfusion.Licensing/) for validating Syncfusion® license key. - -## Add Syncfusion® ASP.NET Core Tag Helper -Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelper. - -{% tabs %} -{% highlight C# tabtitle="~/_ViewImports.cshtml" %} - -@addTagHelper *, Syncfusion.EJ2 - -{% endhighlight %} -{% endtabs %} - -## Add stylesheet and script resources - -Here, the theme and script is referred using CDN inside the `` of `~/Pages/Shared/_Layout.cshtml` file as follows, - -{% tabs %} -{% highlight cshtml tabtitle="~/_Layout.cshtml" %} - - - ... - - - - - - -{% endhighlight %} -{% endtabs %} - -N> Checkout the [Themes topic](https://ej2.syncfusion.com/aspnetcore/documentation/appearance/theme) to learn different ways ([CDN](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references#cdn-reference), [NPM package](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references#node-package-manager-npm), and [CRG](https://ej2.syncfusion.com/aspnetcore/documentation/common/custom-resource-generator)) to refer styles in ASP.NET Core application, and to have the expected appearance for Syncfusion® ASP.NET Core controls. - -N> Checkout the [Adding Script Reference](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your ASP.NET Core application. - -## Register Syncfusion® Script Manager - -Also, register the script manager `` at the end of `` in the ASP.NET Core application as follows. - -{% tabs %} -{% highlight cshtml tabtitle="~/_Layout.cshtml" %} - - - ... - - - - -{% endhighlight %} -{% endtabs %} - -## Configure AI Service - -To enable AI-powered autocompletion in the Smart TextArea, configure an AI model (OpenAI, Azure OpenAI, or Ollama) in your application. Install the required NuGet packages and update the **~/Program.cs** file as described below. - -### Install AI Service NuGet Packages - -Install the following NuGet packages based on your chosen AI provider: - -{% tabs %} -{% highlight c# tabtitle="Package Manager" %} - -Install-Package Microsoft.Extensions.AI -Install-Package Microsoft.Extensions.AI.OpenAI -@* For Azure OpenAI only *@ -Install-Package Azure.AI.OpenAI -@* For Ollama only *@ -Install-Package OllamaSharp - -{% endhighlight %} -{% endtabs %} - -### OpenAI Configuration - -For OpenAI, obtain an API key from [OpenAI](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key) and specify the desired model (e.g., `gpt-3.5-turbo`, `gpt-4`). Store the API key securely in a configuration file or environment variable. - -Add the following to the **~/Program.cs** file: - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -using Microsoft.Extensions.AI; -using OpenAI; -using Syncfusion.EJ2; - - -builder.Services.AddRazorPages(); - -string openAIApiKey = "API-KEY"; -string openAIModel = "OPENAI_MODEL"; -OpenAIClient openAIClient = new OpenAIClient(openAIApiKey); -IChatClient openAIChatClient = openAIClient.GetChatClient(openAIModel).AsIChatClient(); -builder.Services.AddChatClient(openAIChatClient); - -builder.Services.AddSyncfusionSmartComponents() - .InjectOpenAIInference(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - -### Azure OpenAI Configuration - -For Azure OpenAI, deploy a resource and model as described in [Azure OpenAI documentation](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource). Obtain the API key, endpoint, and model name from your Azure portal. - -Add the following to the **~/Program.cs** file: - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -using Syncfusion.EJ2; -using Microsoft.Extensions.AI; -using Azure.AI.OpenAI; -using System.ClientModel; - -builder.Services.AddRazorPages(); - -string azureOpenAIKey = "AZURE_OPENAI_KEY"; -string azureOpenAIEndpoint = "AZURE_OPENAI_ENDPOINT"; -string azureOpenAIModel = "AZURE_OPENAI_MODEL"; -AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient( - new Uri(azureOpenAIEndpoint), - new ApiKeyCredential(azureOpenAIKey) -); -IChatClient azureOpenAIChatClient = azureOpenAIClient.GetChatClient(azureOpenAIModel).AsIChatClient(); -builder.Services.AddChatClient(azureOpenAIChatClient); - -builder.Services.AddSyncfusionSmartComponents() - .InjectOpenAIInference(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - -### Ollama Configuration - -To use Ollama for self-hosted models: - -1. Download and install Ollama from [Ollama's official website](https://ollama.com). -2. Install a model from the [Ollama Library](https://ollama.com/library) (e.g., `llama2:13b`, `mistral:7b`). -3. Configure the endpoint URL (e.g., `http://localhost:11434`) and model name. - -Add the following to the **~/Program.cs** file: - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -using Syncfusion.EJ2; -using Microsoft.Extensions.AI; -using OllamaSharp; - -builder.Services.AddRazorPages(); - -string ModelName = "MODEL_NAME"; -IChatClient chatClient = new OllamaApiClient("http://localhost:11434", ModelName); -builder.Services.AddChatClient(chatClient); - -builder.Services.AddSyncfusionSmartComponents() - .InjectOpenAIInference(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - -## Add ASP.NET Core Smart TextArea Control - -The **user-role** attribute (required) defines the context for AI autocompletion based on the user's role. The **user-phrases** attribute (optional) provides predefined expressions aligned with the application's tone and common phrases. - -Now, add the Syncfusion® ASP.NET Core Smart TextArea tag helper in `~/Pages/Index.cshtml` page. - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -@{ - var presets = new { - userRole = "Maintainer of an open-source project replying to GitHub issues", - userPhrases = new[] { "Thank you for contacting us.", "To investigate, we'll need a repro as a public Git repo.", "Could you please post a screenshot of NEED_INFO?", "This sounds like a usage question. This issue tracker is intended for bugs and feature proposals. Unfortunately, we don't have the capacity to answer general usage questions and would recommend StackOverflow for a faster response.", "We don't accept ZIP files as repros." }, - placeHolder = "Write your response to the GitHub issue..." }; -} - - - -{% endhighlight %} -{% endtabs %} - -Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core -Smart TextArea control will be rendered in the default web browser. - -![ASP.NET Core Smart TextArea Control](images/SmartTextArea.gif) - -## Troubleshooting - -If you encounter issues, try the following: -- **NuGet Installation Errors**: Ensure a stable internet connection and set the NuGet package source to `https://www.nuget.org`. Run `dotnet restore` again. -- **AI Service Configuration Errors**: Verify the API key, endpoint, and model name in **Program.cs**. Check for typos or incorrect values. diff --git a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/groq-service.md b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/groq-service.md deleted file mode 100644 index 8229b14c71..0000000000 --- a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/groq-service.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -layout: post -title: Groq AI in ##Platform_Name## Smart TextArea Control | Syncfusion -description: Learn how to implement a custom AI service using Groq AI with ##Platform_Name## Smart TextArea control of Syncfusion Essential JS 2 and more details. -platform: ej2-asp-core-mvc -control: Groq AI -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Groq AI Integration with ASP.NET Core Smart TextArea - -The Syncfusion ASP.NET Core Smart TextArea control provides AI-powered autocompletion for context-aware text input, typically using OpenAI or Azure OpenAI. This guide explains how to integrate the Groq AI service with the Smart TextArea using the `IChatInferenceService` interface, enabling custom AI-driven responses in a ASP.NET Core App. - -## Setting Up Groq - -1. **Create a Groq Account** - Visit [Groq Cloud Console](https://console.groq.com), sign up or sign in, and complete the verification process. -2. **Obtain an API Key** - Navigate to [API Keys](https://console.groq.com/keys) in the Groq Console and click "Create API Key." -3. **Review Model Specifications** - Refer to [Groq Models Documentation](https://console.groq.com/docs/models) for details on available models (e.g., `llama3-8b-8192`). - -## Create a Groq AI Service - -Create a service class to manage interactions with the Groq API, including authentication and response processing for the Smart TextArea. - -1. Create a `Services` folder in your project. -2. Add a new file named `GroqService.cs` in the `Services` folder. -3. Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., `appsettings.json` or environment variables). - -```csharp -using Microsoft.Extensions.AI; -using System.Net; -using System.Text; -using System.Text.Json; - -public class GroqService -{ - private readonly string _apiKey; - private readonly string _modelName = "llama-3.3-70b-versatile"; // Example model - private readonly string _endpoint = "https://api.groq.com/openai/v1/chat/completions"; - private static readonly HttpClient HttpClient = new(new SocketsHttpHandler - { - PooledConnectionLifetime = TimeSpan.FromMinutes(30), - EnableMultipleHttp2Connections = true - }) - { - DefaultRequestVersion = HttpVersion.Version20 // Fallback to HTTP/2 for broader compatibility - }; - private static readonly JsonSerializerOptions JsonOptions = new() - { - PropertyNamingPolicy = JsonNamingPolicy.CamelCase - }; - - public GroqService(IConfiguration configuration) - { - _apiKey = configuration["Groq:ApiKey"] ?? throw new ArgumentNullException("Groq API key is missing."); - if (!HttpClient.DefaultRequestHeaders.Contains("Authorization")) - { - HttpClient.DefaultRequestHeaders.Clear(); - HttpClient.DefaultRequestHeaders.Add("Authorization", $"Bearer {_apiKey}"); - } - } - - public async Task CompleteAsync(IList chatMessages) - { - var requestPayload = new GroqChatParameters - { - Model = _modelName, - Messages = chatMessages.Select(m => new Message - { - Role = m.Role == ChatRole.User ? "user" : "assistant", - Content = m.Text - }).ToList(), - Stop = new List { "END_INSERTION", "NEED_INFO", "END_RESPONSE" } // Configurable stop sequences - }; - - var content = new StringContent(JsonSerializer.Serialize(requestPayload, JsonOptions), Encoding.UTF8, "application/json"); - - try - { - var response = await HttpClient.PostAsync(_endpoint, content); - response.EnsureSuccessStatusCode(); - var responseString = await response.Content.ReadAsStringAsync(); - var responseObject = JsonSerializer.Deserialize(responseString, JsonOptions); - return responseObject?.Choices?.FirstOrDefault()?.Message?.Content ?? "No response from model."; - } - catch (Exception ex) when (ex is HttpRequestException || ex is JsonException) - { - throw new InvalidOperationException("Failed to communicate with Groq API.", ex); - } - } -} -``` - -N> Store the Groq API key in `appsettings.json` (e.g., `{ "Groq": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security. - -## Define Request and Response Models - -Define C# classes to match the Groq API’s request and response format. - -1. Create a new file named `GroqModels.cs` in the `Services` folder. -2. Add the following model classes: - -```csharp -public class Choice -{ - public Message Message { get; set; } -} - -public class Message -{ - public string Role { get; set; } - public string Content { get; set; } -} - -public class GroqChatParameters -{ - public string Model { get; set; } - public List Messages { get; set; } - public List Stop { get; set; } -} - -public class GroqResponseObject -{ - public string Model { get; set; } - public List Choices { get; set; } -} -``` - -## Create a Custom AI Service - -Implement the `IChatInferenceService` interface to connect the Smart TextArea to the Groq service. - -1. Create a new file named `GroqInferenceService.cs` in the `Services` folder. -2. Add the following implementation: - -```csharp -using Syncfusion.EJ2.AI; -using System.Threading.Tasks; - -public class GroqInferenceService : IChatInferenceService -{ - private readonly GroqService _groqService; - - public GroqInferenceService(GroqService groqService) - { - _groqService = groqService; - } - - public async Task GenerateResponseAsync(ChatParameters options) - { - return await _groqService.CompleteAsync(options.Messages); - } -} -``` - -## Configure the ASP.NET Core App - -Register the Groq service and `IChatInferenceService` implementation in the dependency injection container. - -Update the **~/Program.cs** file as follows: - -```csharp -using Syncfusion.EJ2; -using Syncfusion.EJ2.AI; - -builder.Services.AddRazorPages(); -builder.Services.AddSyncfusionSmartComponents(); -builder.Services.AddSingleton(); -builder.Services.AddSingleton(); - -var app = builder.Build(); -// ... -``` - -## Add ASP.NET Core Smart TextArea Control - -Add the Smart TextArea in the **~/Pages/Index.cshtml** file to test the Groq AI integration. - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -@{ - var presets = new { - userRole = "Maintainer of an open-source project replying to GitHub issues", - userPhrases = new[] { "Thank you for contacting us.", "To investigate, we'll need a repro as a public Git repo.", "Could you please post a screenshot of NEED_INFO?", "This sounds like a usage question. This issue tracker is intended for bugs and feature proposals. Unfortunately, we don't have the capacity to answer general usage questions and would recommend StackOverflow for a faster response.", "We don't accept ZIP files as repros." }, - placeHolder = "Write your response to the GitHub issue..." }; -} - - - -{% endhighlight %} -{% endtabs %} - -Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core -Smart TextArea control will be rendered in the default web browser. - -![ASP.NET Core Smart TextArea Control](images/SmartTextArea.gif) - -## Troubleshooting - -If the Groq AI integration does not work, try the following: -- **No Suggestions Displayed**: Verify that the Groq API key and model name are correct in the configuration. Check the `GroqService` implementation for errors. -- **HTTP Request Failures**: Ensure a stable internet connection and that the Groq API endpoint (`https://api.groq.com/openai/v1/chat/completions`) is accessible. Test with HTTP/2 instead of HTTP/3 if compatibility issues arise. -- **Service Registration Errors**: Confirm that `GroqService` and `GroqInferenceService` are registered in **Program.cs**. diff --git a/ej2-asp-core-mvc/smart-textarea/images/SmartTextArea-Inline.gif b/ej2-asp-core-mvc/smart-textarea/images/SmartTextArea-Inline.gif deleted file mode 100644 index 8b1ff768fe..0000000000 Binary files a/ej2-asp-core-mvc/smart-textarea/images/SmartTextArea-Inline.gif and /dev/null differ diff --git a/ej2-asp-core-mvc/smart-textarea/images/SmartTextArea-Popup.gif b/ej2-asp-core-mvc/smart-textarea/images/SmartTextArea-Popup.gif deleted file mode 100644 index efcbf7fbeb..0000000000 Binary files a/ej2-asp-core-mvc/smart-textarea/images/SmartTextArea-Popup.gif and /dev/null differ diff --git a/ej2-asp-core-mvc/smart-textarea/images/SmartTextArea.gif b/ej2-asp-core-mvc/smart-textarea/images/SmartTextArea.gif deleted file mode 100644 index 8b1ff768fe..0000000000 Binary files a/ej2-asp-core-mvc/smart-textarea/images/SmartTextArea.gif and /dev/null differ diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/selection/check-box-selection.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/selection/check-box-selection.md index c74d107c55..52e4a6a9dc 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/selection/check-box-selection.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/selection/check-box-selection.md @@ -76,4 +76,31 @@ In checkbox selection, selection can also be done by clicking on rows. This sele > Checkbox Selection feature is intended for row selection only; it is not compatible with cell selection mode. +## Conditional row selection using isRowSelectable + +The TreeGrid supports conditional row selection through the [isRowSelectable](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.IsRowSelectable.html) 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. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/tree-grid/selection/partial-selection/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Partial.cs" %} +{% include code-snippet/tree-grid/selection/partial-selection/partial.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/tree-grid/selection/partial-selection/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Partial.cs" %} +{% include code-snippet/tree-grid/selection/partial-selection/partial.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + N> You can refer to our [`ASP.NET MVC Tree Grid`](https://www.syncfusion.com/aspnet-mvc-ui-controls/tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`ASP.NET MVC Tree Grid example`](https://ej2.syncfusion.com/aspnetmvc/TreeGrid/Overview#/material) to knows how to present and manipulate data. \ No newline at end of file diff --git a/ej2-asp-core-mvc/treeview/images/customize-based-on-level.png b/ej2-asp-core-mvc/treeview/images/customize-based-on-level.png new file mode 100644 index 0000000000..e40aed3a55 Binary files /dev/null and b/ej2-asp-core-mvc/treeview/images/customize-based-on-level.png differ diff --git a/ej2-asp-core-mvc/treeview/images/customize-checkbox.png b/ej2-asp-core-mvc/treeview/images/customize-checkbox.png new file mode 100644 index 0000000000..7db280d36e Binary files /dev/null and b/ej2-asp-core-mvc/treeview/images/customize-checkbox.png differ diff --git a/ej2-asp-core-mvc/treeview/images/customize-expand-collapse-icon.png b/ej2-asp-core-mvc/treeview/images/customize-expand-collapse-icon.png new file mode 100644 index 0000000000..3b47ce5b32 Binary files /dev/null and b/ej2-asp-core-mvc/treeview/images/customize-expand-collapse-icon.png differ diff --git a/ej2-asp-core-mvc/treeview/images/customize-html-attribute.png b/ej2-asp-core-mvc/treeview/images/customize-html-attribute.png new file mode 100644 index 0000000000..7bb65fd3f9 Binary files /dev/null and b/ej2-asp-core-mvc/treeview/images/customize-html-attribute.png differ diff --git a/ej2-asp-core-mvc/treeview/images/customize-node-height.png b/ej2-asp-core-mvc/treeview/images/customize-node-height.png new file mode 100644 index 0000000000..25a1301e6d Binary files /dev/null and b/ej2-asp-core-mvc/treeview/images/customize-node-height.png differ diff --git a/ej2-asp-core-mvc/treeview/images/customize-treeview-text.png b/ej2-asp-core-mvc/treeview/images/customize-treeview-text.png new file mode 100644 index 0000000000..5ed3c3ae78 Binary files /dev/null and b/ej2-asp-core-mvc/treeview/images/customize-treeview-text.png differ diff --git a/ej2-asp-core-mvc/treeview/style.md b/ej2-asp-core-mvc/treeview/style.md new file mode 100644 index 0000000000..a7fdc80c0b --- /dev/null +++ b/ej2-asp-core-mvc/treeview/style.md @@ -0,0 +1,124 @@ +--- +layout: post +title: Styles and Appearance in ##Platform_Name## TreeView component | Syncfusion +description: Checkout and learn here all about styles and appearance in Syncfusion ##Platform_Name# TreeView component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: TreeView +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Styles and Appearance in ##Platform_Name## 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 height of TreeView nodes](./images/customize-node-height.png) + +## 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 text of TreeView nodes](./images/customize-treeview-text.png) + +## 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 expand and collapse icons](./images/customize-expand-collapse-icon.png) + +## 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 checkboxes](./images/customize-checkbox.png) + +## 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 nodes based on levels](./images/customize-based-on-level.png) + +## Customizing the TreeView using HtmlAttributes + +{% if page.publishingplatform == "aspnet-core" %} + +The [HtmlAttributes](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Navigations.TreeViewFieldsSettings.html#Syncfusion_EJ2_Navigations_TreeViewFieldsSettings_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; +} +``` + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/treeview/customization/self-referential/tagHelper %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + + +The [HtmlAttributes](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Navigations.TreeViewFieldsSettings.html#Syncfusion_EJ2_Navigations_TreeViewFieldsSettings_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; +} +``` + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/treeview/customization/self-referential/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Selfreferential.cs" %} +{% include code-snippet/treeview/customization/self-referential/selfreferential.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index b936bfff6a..ffe3137ef5 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -20,6 +20,7 @@
  • Installation
  • @@ -2246,6 +2248,7 @@
  • Code Block
  • Remove Formatting
  • Format Painter
    • +
  • Clipboard Cleanup
  • Paste Cleanup
  • Enter Key Configuration
  • Undo Redo
    • @@ -2388,38 +2391,7 @@ -
  • Smart Paste Button - -
    • -
  • Smart TextArea - -
    • +
  • Smith Chart