diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/ai-coding-assistant/mcp-server.md b/ej2-asp-core-mvc/EJ2_ASP.MVC/ai-coding-assistant/mcp-server.md new file mode 100644 index 0000000000..d9337cd0c0 --- /dev/null +++ b/ej2-asp-core-mvc/EJ2_ASP.MVC/ai-coding-assistant/mcp-server.md @@ -0,0 +1,239 @@ +--- +layout: post +title: SyncfusionAspNetMvcAssistant MCP Server | Syncfusion +description: Learn how to configure and use SyncfusionAspNetMvcAssistant MCP server for code generation, documentation, and troubleshooting in ASP.NET MVC apps. +control: Getting started with SyncfusionAspNetMvcAssistant MCP Server +platform: ej2-asp-core-mvc +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# SyncfusionAspNetMvcAssistant MCP Server + +## Overview + +The [SyncfusionAspNetMvcAssistant](https://www.npmjs.com/package/@syncfusion/aspnetmvc-assistant) is a specialized [Model Context Protocol (MCP)](https://modelcontextprotocol.io/docs/getting-started/intro) server that provides intelligent assistance for developers using Syncfusion's ASP.NET MVC controls. This tool seamlessly integrates with compatible [MCP clients](https://modelcontextprotocol.io/clients) to enhance your development workflow when building ASP.NET MVC applications with Syncfusion® controls. + +### Key Benefits + +* Intelligent code generation for Syncfusion® ASP.NET MVC controls. +* Detailed documentation and usage examples. +* Troubleshooting assistance for common integration challenges. + +## Prerequisites + +Before using [SyncfusionAspNetMvcAssistant](https://www.npmjs.com/package/@syncfusion/aspnetmvc-assistant), ensure you have: + +* Required [node](https://nodejs.org/en/) version >= 18 +* A [compatible MCP client](https://modelcontextprotocol.io/clients) (Visual Studio Code with GitHub Copilot, [Syncfusion® CodeStudio](https://www.syncfusion.com/code-studio/), etc.) +* An active Syncfusion® license (any of the following): + - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) + - [Free Community License](https://www.syncfusion.com/products/communitylicense) + - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) +* An active [API KEY](https://syncfusion.com/account/api-key) + +## Unlimited Access + +Syncfusion® offers unlimited access to this MCP server. There are no restrictions on: + +* Number of requests +* Controls usage +* Query caps +* Usage duration + +This ensures users can fully leverage Syncfusion® controls to enhance their development experience without limitations. + +## Installation and setup + +Before you can invoke the `SyncfusionAspNetMvcAssistant` MCP server, you need to configure your MCP client with these settings. The **Generic MCP Server Settings** shown below are identical across all clients: + +### Generic MCP Server Settings + +- **npm package name**: `@syncfusion/aspnetmvc-assistant` +- **Type**: stdio (standard input/output transport) +- **Command**: npx +- **Arguments**: -y +- **Server name**: SyncfusionAspNetMvcAssistant + +You need to add your [Syncfusion API key](https://syncfusion.com/account/api-key) as an env parameter in the configuration file: + +```json +"env": { + "Syncfusion_API_Key": "YOUR_API_KEY" +} +``` + +Below are setup instructions for popular MCP clients: + +### Syncfusion® Code Studio + +* In [Code Studio](https://www.syncfusion.com/code-studio/), open MCP Marketplace and navigate to the `Custom Servers` tab. +* Enter the Server Name as `aspnetmvc-mcp`, choose Server Type as npm package, and set the NPM Package name to `@syncfusion/aspnetmvc-assistant`. +* Add an environment variable as `Syncfusion_API_Key` and value as your [Syncfusion API key](https://syncfusion.com/account/api-key), then click **Install Server**. +* Once installed, the server will appear in the User Installed Server list, and will be added to the **config.yaml** file. +* The server is now ready for use in Code Studio. For more details, refer to the [Code Studio documentation](https://help.syncfusion.com/code-studio/reference/configure-properties/mcp/customservers#npm-server). + +### Visual Studio Code (GitHub Copilot MCP) + +* To configure an MCP server for a specific workspace, you can create a `.vscode/mcp.json` file in your workspace folder. + +```json +{ + "servers": { + "syncfusion-aspnetmvc-assistant": { + "type": "stdio", + "command": "npx", + "args": [ + "-y", + "@syncfusion/aspnetmvc-assistant@latest" + ], + "env": { + "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } +} +``` + +* After updating the configuration in mcp.json, you'll notice a "Start" option at the top of the config. This allows you to easily start the [SyncfusionAspNetMvcAssistant](https://www.npmjs.com/package/@syncfusion/aspnetmvc-assistant) server directly from the settings interface without additional commands. + +* Confirm the server is active by checking for a message like: `SyncfusionAspNetMvcAssistant is running...` in the output. + +* For additional guidance, refer to the [Visual Studio Code documentation](https://code.visualstudio.com/docs/copilot/customization/mcp-servers#_add-an-mcp-server). + +### Visual Studio (GitHub Copilot MCP) + +* To configure an MCP server for a specific workspace, you can create a `.vs/mcp.json` file in your workspace folder. + +```json +{ + "servers": { + "syncfusion-aspnetmvc-assistant": { + "type": "stdio", + "command": "npx", + "args": [ + "-y", + "@syncfusion/aspnetmvc-assistant@latest" + ], + "env": { + "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } +} +``` + +* After updating the mcp.json configuration, open the GitHub Copilot Chat window. Click the Ask arrow, then select Agent. +* Select the [SyncfusionAspNetMvcAssistant](https://www.npmjs.com/package/@syncfusion/aspnetmvc-assistant) from the tools section. +* For more details, refer to the official [Visual Studio documentation](https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers?view=vs-2022). + +### Cursor + +To configure an MCP server for a specific workspace, you can create a `.cursor/mcp.json` file in your workspace folder. + +```json +{ + "mcpServers": { + "syncfusion-aspnetmvc-assistant": { + "type": "stdio", + "command": "npx", + "args": [ + "-y", + "@syncfusion/aspnetmvc-assistant@latest" + ], + "env": { + "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } +} +``` + +For more details, refer to the [Cursor documentation](https://cursor.com/docs/context/mcp#using-mcp-json). + +### JetBrains IDEs + +* Go to Settings -> Tools -> AI Assistant -> Model Context Protocol (MCP). +* Click + Add to add a new MCP server configuration. +* In the New MCP Server dialog, switch the dropdown as `As JSON` and add the following config: + +```json +{ + "mcpServers": { + "syncfusion-aspnetmvc-assistant": { + "command": "npx.cmd", + "args": [ + "-y", + "@syncfusion/aspnetmvc-assistant@latest" + ], + "env": { + "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } +} +``` + +* Click OK and Apply. + +For further assistance, see the [JetBrains documentation](https://www.jetbrains.com/help/ai-assistant/mcp.html#connect-to-an-mcp-server). + +> For more detailed information about configuring MCP servers in various clients, refer to the official documentations, e.g., [Windsurf](https://docs.windsurf.com/windsurf/cascade/mcp#mcp-config-json) + +## Usage + +To activate the SyncfusionAspNetMvcAssistant MCP server: + +1. Start your prompt with one of the following: + * 'SyncfusionAspNetMvcAssistant' + * '/syncfusion-aspnetmvc-assistant' + * '/syncfusion-aspnetmvc' + * '@syncfusion-aspnetmvc' + * '@ask_syncfusion_aspnetmvc' + * 'ej2-aspnetmvc' + + In Visual Studio Code, you can also use #SyncfusionAspNetMvcAssistant to explicitly invoke the MCP server. + +2. Grant permission for the server to run (for the session, workspace, or always). +3. For best results, start a new chat for each new topic to maintain clean context. + +### Mode availability + +Syncfusion® MCP Servers provide full access to all AI interaction modes — Ask/Chat, Edit, and Agent — across supported MCP clients. + +### Best Practices for Effective Usage + +1. `Be specific`: Mention both platform and control (e.g., "How do I create a Syncfusion ASP.NET MVC Grid with paging and filtering?"). +2. `Provide context`: Include details about your use case for more targeted solutions. +3. `Use descriptive queries`: Avoid vague questions that lack necessary context. +4. `Start fresh for new topics`: Begin a new chat session when switching controls or topics. + +### Example Queries + +Here are some effective ways to use [SyncfusionAspNetMvcAssistant](https://www.npmjs.com/package/@syncfusion/aspnetmvc-assistant): + + * "Create a Syncfusion ASP.NET MVC Grid control with paging, sorting and filtering" + * "How do I implement data binding with Syncfusion ASP.NET MVC scheduler?" + * "Show me how to create a dashboard with multiple Syncfusion controls" + +## Troubleshooting + +If you encounter issues: + + * Verify your API key is correctly configured. + * Ensure the MCP server is enabled in your client's tools selection. + * Check that you're using a compatible MCP client version. + * Try restarting your development environment. + +## Support + +Product support is available through the following mediums. + +* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support +* [Community forum](https://www.syncfusion.com/forums/aspnetmvc-js2) +* [Request feature or report bug](https://www.syncfusion.com/feedback/aspnet-mvc) +* Live chat + +## See also + +* [Syncfusion ASP.NET MVC Documentation](https://ej2.syncfusion.com/aspnetmvc/documentation/getting-started/aspnet-mvc-htmlhelper) diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/ai-coding-assistant/overview.md b/ej2-asp-core-mvc/EJ2_ASP.MVC/ai-coding-assistant/overview.md new file mode 100644 index 0000000000..358b30e82e --- /dev/null +++ b/ej2-asp-core-mvc/EJ2_ASP.MVC/ai-coding-assistant/overview.md @@ -0,0 +1,70 @@ +--- +layout: post +title: AI Coding Assistant Overview in ##Platform_Name## controls | Syncfusion +description: Learn how Syncfusion AI Coding Assistant boost ASP.NET MVC productivity by generating accurate code snippets, examples, and contextual guidance. +control: Syncfusion AI Coding Assistant Overview +platform: ej2-asp-core-mvc +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Syncfusion® AI Coding Assistant Overview + +The **Syncfusion® AI Coding Assistant** are designed to streamline your development workflow when building ASP.NET MVC applications with Syncfusion® controls. It uses contextual knowledge of the Syncfusion® UI library to generate accurate code snippets, configuration examples, and guided explanations—minimizing documentation searches and maximizing productivity. + +AI Coding Assistant: + +* **The SyncfusionAspNetMvcAssistant MCP Server** + Processes advanced prompts and returns tailored code suggestions via [MCP-compatible clients](https://modelcontextprotocol.io/clients). + +## Getting Started + +To use the AI Coding Assistant, you need: + +* A [Syncfusion® user account](https://www.syncfusion.com/account) +* An active Syncfusion® license (any of the following): + - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) + - [Free Community License](https://www.syncfusion.com/products/communitylicense) + - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) +* An active [API KEY](https://syncfusion.com/account/api-key) +* An [ASP.NET MVC application that includes SyncfusionAspNetMvc](https://ej2.syncfusion.com/aspnetmvc/documentation/getting-started/aspnet-mvc-htmlhelper) + +## Unlimited Access + +Syncfusion® offers unlimited access to the AI Coding Assistant, with no limitations on: + +* Number of requests +* Controls usage +* Query types +* Usage duration + +This ensures users can fully leverage Syncfusion® controls to enhance their development experience without limitations. + +## Best Practices + +* Initial Setup: Use the tools to quickly add and configure Syncfusion® controls in your ASP.NET MVC application. +* Feature Tuning: Enable or disable control features through prompt-based configuration for tailored functionality. +* Data Binding: Generate sample data for testing and prototyping. Avoid using sensitive or production data to ensure security. +* Step-by-step explanations: Use annotated code to understand control behavior. Note that the level of detail may vary depending on the tool, mode, and AI model used. Refer to the [Syncfusion® ASP.NET MVC Documentation](https://ej2.syncfusion.com/aspnetmvc/documentation/getting-started/aspnet-mvc-htmlhelper) for in-depth information. +* Troubleshooting: Resolve common issues with AI-generated suggestions. For complex problems, refer to [documentation](https://ej2.syncfusion.com/aspnetmvc/documentation/getting-started/aspnet-mvc-htmlhelper) or [support](https://support.syncfusion.com/support/tickets/create). + +> Always check AI-generated content and code for accuracy before using it. + +## Recommendations + +* Session Management: Start new sessions when switching tasks to ensure prompt relevance and maintain content focus. +* Model Compatibility: For optimal performance, use the tools with advanced AI models such as GPT-5 or Claude Sonnet 4. + +## Privacy & Data Handling + +The Syncfusion® AI Coding Assistant is designed with privacy in mind: + +* The tools do not access your project files or workspace directly. +* User prompts are not stored by any of the tools or used for any other purpose. +* Prompts are not used to train Syncfusion® models. +* The assistant generates context, while the final output is handled by your selected AI model. + +## See also + +* Add the [SyncfusionAspNetMvc MCP Server](https://ej2.syncfusion.com/aspnetmvc/documentation/ai-coding-assistant/mcp-server) to an MCP-enabled client +* [Syncfusion® ASP.NET MVC Documentation](https://ej2.syncfusion.com/aspnetmvc/documentation/getting-started/aspnet-mvc-htmlhelper) diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/introduction.md b/ej2-asp-core-mvc/EJ2_ASP.MVC/introduction.md index 3310fe039b..4f894a06d2 100644 --- a/ej2-asp-core-mvc/EJ2_ASP.MVC/introduction.md +++ b/ej2-asp-core-mvc/EJ2_ASP.MVC/introduction.md @@ -14,11 +14,13 @@ documentation: ug The Syncfusion® ASP.NET MVC UI (Essential® JS 2) is a modern enterprise UI toolkit that has been built from the ground up to be lightweight, responsive, modular and touch friendly. It also available in other frameworks such as JavaScript and Angular, React. +> **Ready to streamline your Syncfusion® ASP.NET MVC development?** Discover the full potential of Syncfusion® ASP.NET MVC controls with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like Visual Studio, Visual Studio Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/aspnetmvc/documentation/ai-coding-assistant/overview) + ## How to best read this user guide * The best way to get started would be to read the "Getting Started" section of the documentation for the component that you would like to start using first. The "Getting Started" guide gives just enough information that you need to know before starting to write code. This is the only section that we recommend reading end-to-end before starting to write code, all other information can be referred as needed. -* Now that you are familiar with the basics of using the component, the next step would be to start integrating the component into your application. A good starting point would be to refer to the code snippets in the [online sample browser](https://ej2aspnetmvc.azurewebsites.net/aspnetmvc/grid/gridoverview#/bootstrap5) which contains hundreds of code samples, it is very likely that you will find a code sample that resembles your intended usage scenario. +* Now that you are familiar with the basics of using the component, the next step would be to start integrating the component into your application. A good starting point would be to refer to the code snippets in the [online sample browser](https://ej2.syncfusion.com/aspnetmvc/grid/gridoverview#/tailwind3) which contains hundreds of code samples, it is very likely that you will find a code sample that resembles your intended usage scenario. * Another valuable resource is the API reference which provides detailed information on the object hierarchy as well as the settings available on every object. @@ -255,4 +257,4 @@ N> Syncfusion® does not collect any kind of * Syncfusion® Project Template - * [Getting started with Syncfusion® ASP.NET MVC Controls](https://ej2.syncfusion.com/aspnetmvc/documentation/getting-started/project-template) + * [Getting started with Syncfusion® ASP.NET MVC Controls](https://ej2.syncfusion.com/aspnetmvc/documentation/visual-studio-integration/create-project) diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/ai-coding-assistant/mcp-server.md b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/ai-coding-assistant/mcp-server.md new file mode 100644 index 0000000000..1505aa9bbd --- /dev/null +++ b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/ai-coding-assistant/mcp-server.md @@ -0,0 +1,239 @@ +--- +layout: post +title: SyncfusionAspNetCoreAssistant MCP Server | Syncfusion +description: Learn how to configure and use SyncfusionAspNetCoreAssistant MCP server for code generation, documentation, and troubleshooting in ASP.NET Core apps. +control: Getting started with SyncfusionAspNetCoreAssistant MCP Server +platform: ej2-asp-core-mvc +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# SyncfusionAspNetCoreAssistant MCP Server + +## Overview + +The [SyncfusionAspNetCoreAssistant](https://www.npmjs.com/package/@syncfusion/aspnetcore-assistant) is a specialized [Model Context Protocol (MCP)](https://modelcontextprotocol.io/docs/getting-started/intro) server that provides intelligent assistance for developers using Syncfusion's ASP.NET Core controls. This tool seamlessly integrates with compatible [MCP clients](https://modelcontextprotocol.io/clients) to enhance your development workflow when building ASP.NET Core applications with Syncfusion® controls. + +### Key Benefits + +* Intelligent code generation for Syncfusion® ASP.NET Core controls. +* Detailed documentation and usage examples. +* Troubleshooting assistance for common integration challenges. + +## Prerequisites + +Before using [SyncfusionAspNetCoreAssistant](https://www.npmjs.com/package/@syncfusion/aspnetcore-assistant), ensure you have: + +* Required [node](https://nodejs.org/en/) version >= 18 +* A [compatible MCP client](https://modelcontextprotocol.io/clients) (Visual Studio Code with GitHub Copilot, [Syncfusion® CodeStudio](https://www.syncfusion.com/code-studio/), etc.) +* An active Syncfusion® license (any of the following): + - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) + - [Free Community License](https://www.syncfusion.com/products/communitylicense) + - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) +* An active [API KEY](https://syncfusion.com/account/api-key) + +## Unlimited Access + +Syncfusion® offers unlimited access to this MCP server. There are no restrictions on: + +* Number of requests +* Controls usage +* Query caps +* Usage duration + +This ensures users can fully leverage Syncfusion® controls to enhance their development experience without limitations. + +## Installation and setup + +Before you can invoke the `SyncfusionAspNetCoreAssistant` MCP server, you need to configure your MCP client with these core settings. The **Generic MCP Server Settings** shown below are identical across all clients: + +### Generic MCP Server Settings + +- **npm package name**: `@syncfusion/aspnetcore-assistant` +- **Type**: stdio (standard input/output transport) +- **Command**: npx +- **Arguments**: -y +- **Server name**: syncfusionAspNetCoreAssistant + +You need to add your [Syncfusion API key](https://syncfusion.com/account/api-key) as an env parameter in the configuration file: + +```json +"env": { + "Syncfusion_API_Key": "YOUR_API_KEY" +} +``` + +Below are setup instructions for popular MCP clients: + +### Syncfusion® Code Studio + +* In [Code Studio](https://www.syncfusion.com/code-studio/), open MCP Marketplace and navigate to the `Custom Servers` tab. +* Enter the Server Name as `aspnetcore-mcp`, choose Server Type as npm package, and set the NPM Package name to `@syncfusion/aspnetcore-assistant`. +* Add an environment variable as `Syncfusion_API_Key` and value as your [Syncfusion API key](https://syncfusion.com/account/api-key), then click **Install Server**. +* Once installed, the server will appear in the User Installed Server list, and will be added to the **config.yaml** file. +* The server is now ready for use in Code Studio. For more details, refer to the [Code Studio documentation](https://help.syncfusion.com/code-studio/reference/configure-properties/mcp/customservers#npm-server). + +### Visual Studio Code (GitHub Copilot MCP) + +* To configure an MCP server for a specific workspace, you can create a `.vscode/mcp.json` file in your workspace folder. + +```json +{ + "servers": { + "syncfusion-aspnetcore-assistant": { + "type": "stdio", + "command": "npx", + "args": [ + "-y", + "@syncfusion/aspnetcore-assistant@latest" + ], + "env": { + "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } +} +``` + +* After updating the configuration in mcp.json, you'll notice a "Start" option at the top of the config. This allows you to easily start the [SyncfusionAspNetCoreAssistant](https://www.npmjs.com/package/@syncfusion/aspnetcore-assistant) server directly from the settings interface without additional commands. + +* Confirm the server is active by checking for a message like: `SyncfusionAspNetCoreAssistant is running...` in the output. + +* For additional guidance, refer to the [Visual Studio Code documentation](https://code.visualstudio.com/docs/copilot/customization/mcp-servers#_add-an-mcp-server). + +### Visual Studio (GitHub Copilot MCP) + +* To configure an MCP server for a specific workspace, you can create a `.vs/mcp.json` file in your workspace folder. + +```json +{ + "servers": { + "syncfusion-aspnetcore-assistant": { + "type": "stdio", + "command": "npx", + "args": [ + "-y", + "@syncfusion/aspnetcore-assistant@latest" + ], + "env": { + "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } +} +``` + +* After updating the mcp.json configuration, open the GitHub Copilot Chat window. Click the Ask arrow, then select Agent. +* Select the [SyncfusionAspNetCoreAssistant](https://www.npmjs.com/package/@syncfusion/aspnetcore-assistant) from the tools section. +* For more details, refer to the official [Visual Studio documentation](https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers?view=vs-2022). + +### Cursor + +To configure an MCP server for a specific workspace, you can create a `.cursor/mcp.json` file in your workspace folder. + +```json +{ + "mcpServers": { + "syncfusion-aspnetcore-assistant": { + "type": "stdio", + "command": "npx", + "args": [ + "-y", + "@syncfusion/aspnetcore-assistant@latest" + ], + "env": { + "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } +} +``` + +For more details, refer to the [Cursor documentation](https://cursor.com/docs/context/mcp#using-mcp-json). + +### JetBrains IDEs + +* Go to Settings -> Tools -> AI Assistant -> Model Context Protocol (MCP). +* Click + Add to add a new MCP server configuration. +* In the New MCP Server dialog, switch the dropdown as `As JSON` and add the following config: + +```json +{ + "mcpServers": { + "syncfusion-aspnetcore-assistant": { + "command": "npx.cmd", + "args": [ + "-y", + "@syncfusion/aspnetcore-assistant@latest" + ], + "env": { + "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } +} +``` + +* Click OK and Apply. + +For further assistance, see the [JetBrains documentation](https://www.jetbrains.com/help/ai-assistant/mcp.html#connect-to-an-mcp-server). + +> For more detailed information about configuring MCP servers in various clients, refer to the official documentations, e.g., [Windsurf](https://docs.windsurf.com/windsurf/cascade/mcp#mcp-config-json) + +## Usage + +To activate the SyncfusionAspNetCoreAssistant MCP server: + +1. Start your prompt with one of the following: + * 'SyncfusionAspNetCoreAssistant' + * '/syncfusion-aspnetcore-assistant' + * '/syncfusion-aspnetcore' + * '@syncfusion-aspnetcore' + * '@ask_syncfusion_aspnetcore' + * 'ej2-aspnetcore' + + In Visual Studio Code, you can also use #SyncfusionAspNetCoreAssistant to explicitly invoke the MCP server. + +2. Grant permission for the server to run (for the session, workspace, or always). +3. For best results, start a new chat for each new topic to maintain clean context. + +### Mode availability + +Syncfusion® MCP Servers provide full access to all AI interaction modes — Ask/Chat, Edit, and Agent — across supported MCP clients. + +### Best Practices for Effective Usage + +1. `Be specific`: Mention both platform and control (e.g., "How do I create a Syncfusion ASP.NET Core Grid with paging and filtering?"). +2. `Provide context`: Include details about your use case for more targeted solutions. +3. `Use descriptive queries`: Avoid vague questions that lack necessary context. +4. `Start fresh for new topics`: Begin a new chat session when switching controls or topics. + +### Example Queries + +Here are some effective ways to use [SyncfusionAspNetCoreAssistant](https://www.npmjs.com/package/@syncfusion/aspnetcore-assistant): + + * "Create a Syncfusion ASP.NET Core Grid control with paging, sorting and filtering" + * "How do I implement data binding with Syncfusion ASP.NET Core scheduler?" + * "Show me how to create a dashboard with multiple Syncfusion controls" + +## Troubleshooting + +If you encounter issues: + + * Verify your API key is correctly configured. + * Ensure the MCP server is enabled in your client's tools selection. + * Check that you're using a compatible MCP client version. + * Try restarting your development environment. + +## Support + +Product support is available through the following mediums. + +* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours \| Unlimited tickets \| Holiday support +* [Community forum](https://www.syncfusion.com/forums/aspnetcore-js2) +* [Request feature or report bug](https://www.syncfusion.com/feedback/aspnet-core) +* Live chat + +## See also + +* [Syncfusion ASP.NET Core Documentation](https://ej2.syncfusion.com/aspnetcore/documentation/getting-started/razor-pages) diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/ai-coding-assistant/overview.md b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/ai-coding-assistant/overview.md new file mode 100644 index 0000000000..2e9e32bba9 --- /dev/null +++ b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/ai-coding-assistant/overview.md @@ -0,0 +1,70 @@ +--- +layout: post +title: AI Coding Assistant Overview in ##Platform_Name## controls | Syncfusion +description: Learn how Syncfusion AI Coding Assistant boost ASP.NET Core productivity by generating accurate code snippets, examples, and contextual guidance. +control: Syncfusion AI Coding Assistant Overview +platform: ej2-asp-core-mvc +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Syncfusion® AI Coding Assistant Overview + +The **Syncfusion® AI Coding Assistant** are designed to streamline your development workflow when building ASP.NET Core applications with Syncfusion® controls. It uses contextual knowledge of the Syncfusion® UI library to generate accurate code snippets, configuration examples, and guided explanations—minimizing documentation searches and maximizing productivity. + +AI Coding Assistant: + +* **The SyncfusionAspNetCoreAssistant MCP Server** + Processes advanced prompts and returns tailored code suggestions via [MCP-compatible clients](https://modelcontextprotocol.io/clients). + +## Getting Started + +To use the AI Coding Assistant, you need: + +* A [Syncfusion® user account](https://www.syncfusion.com/account) +* An active Syncfusion® license (any of the following): + - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) + - [Free Community License](https://www.syncfusion.com/products/communitylicense) + - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) +* An active [API KEY](https://syncfusion.com/account/api-key) +* An [ASP.NET Core application that includes SyncfusionAspNetCore](https://ej2.syncfusion.com/aspnetcore/documentation/getting-started/razor-pages) + +## Unlimited Access + +Syncfusion® offers unlimited access to the AI Coding Assistant, with no limitations on: + +* Number of requests +* Controls usage +* Query types +* Usage duration + +This ensures users can fully leverage Syncfusion® controls to enhance their development experience without limitations. + +## Best Practices + +* Initial Setup: Use the tools to quickly add and configure Syncfusion® controls in your ASP.NET Core application. +* Feature Tuning: Enable or disable control features through prompt-based configuration for tailored functionality. +* Data Binding: Generate sample data for testing and prototyping. Avoid using sensitive or production data to ensure security. +* Step-by-step explanations: Use annotated code to understand control behavior. Note that the level of detail may vary depending on the tool, mode, and AI model used. Refer to the [Syncfusion® ASP.NET Core Documentation](https://ej2.syncfusion.com/aspnetcore/documentation/getting-started/razor-pages) for in-depth information. +* Troubleshooting: Resolve common issues with AI-generated suggestions. For complex problems, refer to [documentation](https://ej2.syncfusion.com/aspnetcore/documentation/getting-started/razor-pages) or [support](https://support.syncfusion.com/support/tickets/create). + +> Always check AI-generated content and code for accuracy before using it. + +## Recommendations + +* Session Management: Start new sessions when switching tasks to ensure prompt relevance and maintain content focus. +* Model Compatibility: For optimal performance, use the tools with advanced AI models such as GPT-5 or Claude Sonnet 4. + +## Privacy & Data Handling + +The Syncfusion® AI Coding Assistant is designed with privacy in mind: + +* The tools do not access your project files or workspace directly. +* User prompts are not stored by any of the tools or used for any other purpose. +* Prompts are not used to train Syncfusion® models. +* The assistant generates context, while the final output is handled by your selected AI model. + +## See also + +* Add the [SyncfusionAspNetCore MCP Server](https://ej2.syncfusion.com/aspnetcore/documentation/ai-coding-assistant/mcp-server) to an MCP-enabled client +* [Syncfusion® ASP.NET Core Documentation](https://ej2.syncfusion.com/aspnetcore/documentation/getting-started/razor-pages) diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/introduction.md b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/introduction.md index ede23c88a0..8549e28cb4 100644 --- a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/introduction.md +++ b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/introduction.md @@ -12,6 +12,8 @@ documentation: ug Essential® JS 2 for ASP.NET Core is a modern enterprise UI toolkit that has been built from the ground up to be lightweight, responsive, modular and touch friendly. It is also available in other frameworks such as JavaScript and Angular, React. +> **Ready to streamline your Syncfusion® ASP.NET Core development?** Discover the full potential of Syncfusion® ASP.NET Core controls with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like Visual Studio, Visual Studio Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/aspnetcore/documentation/ai-coding-assistant/overview) + ## How to best read this user guide * The best way to get started would be to read the "Getting Started" section of the documentation for the control that you would like to start using first. The "Getting Started" guide gives just enough information that you need to know before starting to write code. This is the only section that is recommended to read end-to-end before starting to write code, all other information can be referred as needed. @@ -215,7 +217,7 @@ N> Syncfusion® does not collect any kind of * Syncfusion® Project Template - * [Getting started with Syncfusion® ASP.NET Core Controls](https://ej2.syncfusion.com/aspnetcore/documentation/getting-started/project-template) + * [Getting started with Syncfusion® ASP.NET Core Controls](https://ej2.syncfusion.com/aspnetcore/documentation/visual-studio-integration/create-project) * Visual Studio Code diff --git a/ej2-asp-core-mvc/Release-notes/31.2.5.md b/ej2-asp-core-mvc/Release-notes/31.2.5.md new file mode 100644 index 0000000000..7b867ee213 --- /dev/null +++ b/ej2-asp-core-mvc/Release-notes/31.2.5.md @@ -0,0 +1,98 @@ +--- +title: Essential Studio for ##Platform_Name## Release Notes - v31.2.5 +description: Learn here about the controls in the Essential Studio for ##Platform_Name## Weekly Release - Release Notes - v31.2.5 +platform: ej2-asp-core-mvc +documentation: ug +--- + +# Essential Studio for ##Platform_Name## - v31.2.5 Release Notes + +{% include release-info.html date="November 04, 2025" version="v31.2.5" passed="63682" failed="0" %} + +{% directory path: _includes/release-notes/v31.2.5 %} + +{% 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 | 205 | 205 | 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 | 168 | 168 | 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 | 4957 | 4957 | 0 | All Passed | +| Chat UI | 184 | 184 | 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 | 904 | 904 | 0 | All Passed | +| Context Menu | 105 | 105 | 0 | All Passed | +| Data Grid | 3663 | 3663 | 0 | All Passed | +| Date Picker | 426 | 426 | 0 | All Passed | +| Date Range Picker | 519 | 519 | 0 | All Passed | +| Date Time Picker | 324 | 324 | 0 | All Passed | +| Diagram | 12813 | 12813 | 0 | All Passed | +| Dialog | 63 | 63 | 0 | All Passed | +| DropDown Button | 132 | 132 | 0 | All Passed | +| Dropdown List | 194 | 194 | 0 | All Passed | +| Dropdown Tree | 105 | 105 | 0 | All Passed | +| File Manager | 2188 | 2188 | 0 | All Passed | +| Floating Action Button | 174 | 174 | 0 | All Passed | +| Gantt | 3522 | 3522 | 0 | All Passed | +| HeatMap Chart | 635 | 635 | 0 | All Passed | +| Image Editor | 1653 | 1653 | 0 | All Passed | +| In-place Editor | 642 | 642 | 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 | 1368 | 1368 | 0 | All Passed | +| Mention | 35 | 35 | 0 | All Passed | +| Menu | 187 | 187 | 0 | All Passed | +| Multicolumn Combo Box | 254 | 254 | 0 | All Passed | +| Multiselect Dropdown | 422 | 422 | 0 | All Passed | +| OTP Input | 240 | 240 | 0 | All Passed | +| Pivot Table | 5303 | 5303 | 0 | All Passed | +| Progress Bar | 81 | 81 | 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 | 623 | 623 | 0 | All Passed | +| Rich Text Editor | 5095 | 5095 | 0 | All Passed | +| schedule | 4644 | 4644 | 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 | 58 | 58 | 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 | 54 | 54 | 0 | All Passed | +| Time Picker | 180 | 180 | 0 | All Passed | +| Timeline | 213 | 213 | 0 | All Passed | +| Toast | 139 | 139 | 0 | All Passed | +| Toolbar | 112 | 112 | 0 | All Passed | +| ToolTip | 136 | 136 | 0 | All Passed | +| TreeGrid | 3786 | 3786 | 0 | All Passed | +| Treemap | 326 | 326 | 0 | All Passed | +| Treeview | 370 | 370 | 0 | All Passed | \ No newline at end of file diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/getting-started.md b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/getting-started.md index 0b50532730..877af82525 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/getting-started.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/getting-started.md @@ -13,6 +13,8 @@ documentation: ug This section briefly explains about how to include [ASP.NET MVC Chart](https://www.syncfusion.com/aspnet-mvc-ui-controls/charts) control in your ASP.NET MVC application using Visual Studio. +> **Ready to streamline your Syncfusion® ASP.NET MVC development?** Discover the full potential of Syncfusion® ASP.NET MVC controls with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like Visual Studio, Visual Studio Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/aspnetmvc/documentation/ai-coding-assistant/overview) + ## Prerequisites [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) @@ -21,7 +23,7 @@ This section briefly explains about how to include [ASP.NET MVC Chart](https://w * [Create a Project using Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app) -* [Create a Project using Syncfusion® ASP.NET MVC Extension](https://ej2.syncfusion.com/aspnetmvc/documentation/getting-started/project-template) +* [Create a Project using Syncfusion® ASP.NET MVC Extension](https://ej2.syncfusion.com/aspnetmvc/documentation/visual-studio-integration/create-project) ## Install ASP.NET MVC package in the application diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/getting-started.md b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/getting-started.md index 875ae05685..280651a2a1 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/getting-started.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/getting-started.md @@ -12,6 +12,8 @@ documentation: ug This section briefly explains about how to include [ASP.NET Core Chart](https://www.syncfusion.com/aspnet-core-ui-controls/charts) control in your ASP.NET Core application using Visual Studio. +> **Ready to streamline your Syncfusion® ASP.NET Core development?** Discover the full potential of Syncfusion® ASP.NET Core controls with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like Visual Studio, Visual Studio Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/aspnetcore/documentation/ai-coding-assistant/overview) + To get start quickly with ASP.NET Core Charts, you can check on this video: {% youtube "https://www.youtube.com/watch?v=Vll9DXQ7z4Q" %} @@ -24,7 +26,7 @@ To get start quickly with ASP.NET Core Charts, you can check on this video: * [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/getting-started/project-template) +* [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 diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/cell-selection/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/cell-selection/controller.cs new file mode 100644 index 0000000000..e16ed69923 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/cell-selection/controller.cs @@ -0,0 +1,9 @@ +public class HomeController : Controller +{ + + public ActionResult Index() + { + ViewBag.value = @"

This is paragraph one.

This is paragraph two.

" + return View(); + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/cell-selection/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/cell-selection/razor new file mode 100644 index 0000000000..f0195c47c5 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/cell-selection/razor @@ -0,0 +1,30 @@ + + + +@Html.EJS().RichTextEditor("cellSelectionRTE").Value(ViewBag.value).Render() + + + diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/cell-selection/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/cell-selection/tagHelper new file mode 100644 index 0000000000..f11fcd223b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/cell-selection/tagHelper @@ -0,0 +1,30 @@ + + + + + + + diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/controller.cs new file mode 100644 index 0000000000..969244f6f9 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/controller.cs @@ -0,0 +1,8 @@ +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/mail-merge/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/razor new file mode 100644 index 0000000000..f941acb0be --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/razor @@ -0,0 +1,158 @@ + +@using Syncfusion.EJ2.DropDowns + +@{ + + string rteValue = @"

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

+

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

+

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

+

Your customer ID is: {{CustomerID}}.

+

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

+

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

+

Best regards,
The {{CompanyName}} Team

"; + char mentionChar = '{'; + 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", + }; + 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" } + }; + + 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" } + }; +} +
+
+ @Html.EJS().RichTextEditor("mailMergeEditor").ActionBegin("actionBeginHandler").ActionComplete("actionCompleteHandler").SaveInterval(1).Created("created").ToolbarSettings(e => e.Items(tools)).Value(rteValue).Render() + @Html.EJS().Button("merge_data").Content("Merge Data").Click("onClickHandler").CssClass("e-tbar-btn e-btn").Render() + @Html.EJS().DropDownButton("insert_Field").Content("Insert Field").Close("onDropDownClose").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() + @Html.EJS().Mention("mentionField").MentionChar(mentionChar).Created("onMentionCreate").Target("#mailMergeEditor_rte-edit-view").DataSource(mergeData).AllowSpaces(true).Fields(new MentionFieldSettings { Text = "Text" }).DisplayTemplate(" {{${Value}}} ").PopupWidth("250px").PopupHeight("200px").Render() +
+
+ + + + diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/tagHelper new file mode 100644 index 0000000000..55a5431e75 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/tagHelper @@ -0,0 +1,171 @@ +@{ + string rteValue = @"

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

+

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

+

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

+

Your customer ID is: {{CustomerID}}.

+

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

+

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

+

Best regards,
The {{CompanyName}} Team

"; + char mentionChar = '{'; + 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", + }; + 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" } + }; + + 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" } + }; +} + + + +
+
+
+ + + + + + + + +
+
+
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-min-length/EmployeeData.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-min-length/EmployeeData.cs new file mode 100644 index 0000000000..c96c18f023 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-min-length/EmployeeData.cs @@ -0,0 +1,28 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Threading.Tasks; + +namespace WebApplication1.Models +{ + public class EmployeeData + { + public string Name { get; set; } + public string EmailId { get; set; } + + public List EmployeeList() + { + List mention = new List() + { + new EmployeeData { Name = "Selma Rose" EmailId = "selma@gmail.com" }, + new EmployeeData { Name = "Russo Kay", EmailId = "russo@gmail.com" }, + new EmployeeData { Name = "Camden Kate", EmailId = "camden@gmail.com" }, + new EmployeeData { Name = "Mary Kate", EmailId = "mary@gmail.com" }, + new EmployeeData { Name = "Ursula Ann", EmailId = "ursula@gmail.com" }, + new EmployeeData { Name = "Margaret", EmailId = "margaret@gmail.com" }, + }; + return mention; + } + + } +} diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-min-length/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-min-length/razor new file mode 100644 index 0000000000..42915f1ff8 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-min-length/razor @@ -0,0 +1,10 @@ +@{ + List data = new EmployeeData().EmployeeList(); + + string value = @"

Hello @@Maria

+

Welcome to the mention integration with rich text editor demo. Type @@ character and tag user from the suggestion list.

"; +} + +@Html.EJS().RichTextEditor("mentionIntegration").Value(value).Render() + +@Html.EJS().Mention("mentionRTE").Target("#mentionIntegration_rte-edit-view").DataSource((IEnumerable)data).MinLength(3).Fields(new Syncfusion.EJ2.DropDowns.MentionFieldSettings { Text = "Name", Value="EmailId" }).Render() diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-min-length/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-min-length/tagHelper new file mode 100644 index 0000000000..fa5be5259d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-min-length/tagHelper @@ -0,0 +1,12 @@ +@{ + List data = new EmployeeData().EmployeeList(); + + string value = @"

Hello @@Maria

+

Welcome to the mention integration with rich text editor demo. Type @@ character and tag user from the suggestion list.

"; +} + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-suggestion-count/EmployeeData.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-suggestion-count/EmployeeData.cs new file mode 100644 index 0000000000..2e51584906 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-suggestion-count/EmployeeData.cs @@ -0,0 +1,38 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Threading.Tasks; + +namespace WebApplication1.Models +{ + public class EmployeeData + { + public string Name { get; set; } + public string EmailId { get; set; } + + public List EmployeeList() + { + List mention = new List() + { + new EmployeeData { Name = "Selma Rose" EmailId = "selma@gmail.com" }, + new EmployeeData { Name = "Russo Kay", EmailId = "russo@gmail.com" }, + new EmployeeData { Name = "Camden Kate", EmailId = "camden@gmail.com" }, + new EmployeeData { Name = "Mary Kate", EmailId = "mary@gmail.com" }, + new EmployeeData { Name = "Ursula Ann", EmailId = "ursula@gmail.com" }, + new EmployeeData { Name = "Margaret", EmailId = "margaret@gmail.com" }, + new EmployeeData { Name = "Laura Grace", EmailId = "laura@gmail.com" }, + new EmployeeData { Name = "Robert", EmailId = "robert@gmail.com" }, + new EmployeeData { Name = "Albert", EmailId = "albert@gmail.com" }, + new EmployeeData { Name = "Michale", EmailId = "michale@gmail.com" }, + new EmployeeData { Name = "Andrew James", EmailId = "james@gmail.com" }, + new EmployeeData { Name = "Rosalie", EmailId = "rosalie@gmail.com" }, + new EmployeeData { Name = "Stella Ruth", EmailId = "stella@gmail.com" }, + new EmployeeData { Name = "Richard Rose", EmailId = "richard@gmail.com" }, + new EmployeeData { Name = "Gabrielle", EmailId = "gabrielle@gmail.com" }, + new EmployeeData { Name = "Thomas", EmailId = "thomas@gmail.com" }, + }; + return mention; + } + + } +} diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-suggestion-count/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-suggestion-count/razor new file mode 100644 index 0000000000..95fccade70 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-suggestion-count/razor @@ -0,0 +1,69 @@ +@{ + List data = new EmployeeData().EmployeeList(); + + string value = @"

Hello @@Maria

+

Welcome to the mention integration with rich text editor demo. Type @@ character and tag user from the suggestion list.

"; +} + +@Html.EJS().RichTextEditor("mentionIntegration").Value(value).Render() + +@Html.EJS().Mention("mentionRTE").Target("#mentionIntegration_rte-edit-view").DataSource((IEnumerable)data).Fields(new Syncfusion.EJ2.DropDowns.MentionFieldSettings { Text = "Name", Value="EmailId" }).SuggestionCount(5).Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-suggestion-count/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-suggestion-count/tagHelper new file mode 100644 index 0000000000..4182f96fc7 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-suggestion-count/tagHelper @@ -0,0 +1,12 @@ +@{ + List data = new EmployeeData().EmployeeList(); + + string value = @"

Hello @@Maria

+

Welcome to the mention integration with rich text editor demo. Type @@ character and tag user from the suggestion list.

"; +} + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/nested-quotation-formatting/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/nested-quotation-formatting/controller.cs new file mode 100644 index 0000000000..79a629048a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/nested-quotation-formatting/controller.cs @@ -0,0 +1,16 @@ +public class HomeController : Controller +{ + public ActionResult Index() + { + ViewBag.value = @"
+

Outer Quote: The Rich Text Editor provides a flexible way to format quotations.

+
+

Inner Quote: You can even nest blockquotes to represent quoted replies or layered citations.

+
+

Deep Quote: This is useful in forums, emails, or academic writing where multiple levels of quoting are needed.

+
+
+
"; + return View(); + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/nested-quotation-formatting/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/nested-quotation-formatting/razor new file mode 100644 index 0000000000..1852352154 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/nested-quotation-formatting/razor @@ -0,0 +1 @@ +@Html.EJS().RichTextEditor("editor").Value(ViewBag.value).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/nested-quotation-formatting/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/nested-quotation-formatting/tagHelper new file mode 100644 index 0000000000..6a3eb6cee1 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/nested-quotation-formatting/tagHelper @@ -0,0 +1 @@ + diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/nesting-table/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/nesting-table/controller.cs new file mode 100644 index 0000000000..e002c46254 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/nesting-table/controller.cs @@ -0,0 +1,38 @@ +public class HomeController : Controller +{ + + public ActionResult Index() + { + ViewBag.value = @" + + + + + + + + + + + + +
DepartmentDetails
Sales + + + + + + + + + + + + + +
EmployeeTarget
John Doe$50,000
Jane Smith$60,000
+
MarketingCampaign planning in progress
"; + ViewBag.items = new[] { "CreateTable" }; + return View(); + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/nesting-table/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/nesting-table/razor new file mode 100644 index 0000000000..c251cf9dee --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/nesting-table/razor @@ -0,0 +1 @@ +@Html.EJS().RichTextEditor("table").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/nesting-table/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/nesting-table/tagHelper new file mode 100644 index 0000000000..4fa431e596 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/nesting-table/tagHelper @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/node-selection/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/node-selection/controller.cs new file mode 100644 index 0000000000..e16ed69923 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/node-selection/controller.cs @@ -0,0 +1,9 @@ +public class HomeController : Controller +{ + + public ActionResult Index() + { + ViewBag.value = @"

This is paragraph one.

This is paragraph two.

" + return View(); + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/node-selection/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/node-selection/razor new file mode 100644 index 0000000000..08a10a34e4 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/node-selection/razor @@ -0,0 +1,25 @@ + + + +@Html.EJS().RichTextEditor("nodeSelectionRTE").Value(ViewBag.value).Render() + +@section Scripts { + +} diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/node-selection/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/node-selection/tagHelper new file mode 100644 index 0000000000..e4bafb11c0 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/node-selection/tagHelper @@ -0,0 +1,25 @@ + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/select-all/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/select-all/controller.cs new file mode 100644 index 0000000000..4e3fc17612 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/select-all/controller.cs @@ -0,0 +1,9 @@ +public class HomeController : Controller +{ + + public ActionResult Index() + { + ViewBag.value = @"

The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.

Key features:

  • Provides <IFRAME> and <DIV> modes

  • Capable of handling markdown editing.

  • Contains a modular library to load the necessary functionality on demand.

  • Provides a fully customizable toolbar.

  • Provides HTML view to edit the source directly for developers.

  • Supports third-party library integration.

  • Allows preview of modified content before saving it.

  • Handles images, hyperlinks, video, hyperlinks, uploads, etc.

  • Contains undo/redo manager.

  • Creates bulleted and numbered lists.

" + return View(); + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/select-all/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/select-all/razor new file mode 100644 index 0000000000..c9197b8d78 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/select-all/razor @@ -0,0 +1,14 @@ + + + +@Html.EJS().RichTextEditor("selectAll").Value(ViewBag.value).Render() + + + diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/select-all/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/select-all/tagHelper new file mode 100644 index 0000000000..6a81cc41a1 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/select-all/tagHelper @@ -0,0 +1,13 @@ + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/controller.cs new file mode 100644 index 0000000000..969244f6f9 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/controller.cs @@ -0,0 +1,8 @@ +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/selection/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/razor new file mode 100644 index 0000000000..c40d57d450 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/razor @@ -0,0 +1,45 @@ +@{ + 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() +
+ +
+ @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() +
+ + \ 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 new file mode 100644 index 0000000000..4f7bc3d9cb --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/tagHelper @@ -0,0 +1,51 @@ +@{ +var sliderValue = new int[] { 0, 50 }; +} + +
+ + +
+ +
+ + +

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

+
+
+
+ + \ 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 new file mode 100644 index 0000000000..e37415605c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu copy/controller.cs @@ -0,0 +1,49 @@ +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 new file mode 100644 index 0000000000..d04723da1b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu copy/razor @@ -0,0 +1,23 @@ +@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 new file mode 100644 index 0000000000..eb8a8ae918 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu copy/tagHelper @@ -0,0 +1,31 @@ + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/diagram/EJ2_ASP.MVC/getting-started.md b/ej2-asp-core-mvc/diagram/EJ2_ASP.MVC/getting-started.md index f622e4d22a..08fd6f9e1f 100644 --- a/ej2-asp-core-mvc/diagram/EJ2_ASP.MVC/getting-started.md +++ b/ej2-asp-core-mvc/diagram/EJ2_ASP.MVC/getting-started.md @@ -13,6 +13,8 @@ documentation: ug This section briefly explains about how to include [ASP.NET MVC Diagram](https://www.syncfusion.com/aspnet-mvc-ui-controls/diagram) control in your ASP.NET MVC application using Visual Studio. +> **Ready to streamline your Syncfusion® ASP.NET MVC development?** Discover the full potential of Syncfusion® ASP.NET MVC controls with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like Visual Studio, Visual Studio Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/aspnetmvc/documentation/ai-coding-assistant/overview) + ## Prerequisites [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) @@ -21,7 +23,7 @@ This section briefly explains about how to include [ASP.NET MVC Diagram](https:/ * [Create a Project using Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app) -* [Create a Project using Syncfusion® ASP.NET MVC Extension](https://ej2.syncfusion.com/aspnetmvc/documentation/getting-started/project-template) +* [Create a Project using Syncfusion® ASP.NET MVC Extension](https://ej2.syncfusion.com/aspnetmvc/documentation/visual-studio-integration/create-project) ## Install ASP.NET MVC package in the application diff --git a/ej2-asp-core-mvc/diagram/EJ2_ASP.NETCORE/getting-started.md b/ej2-asp-core-mvc/diagram/EJ2_ASP.NETCORE/getting-started.md index b8a6230534..679e52650b 100644 --- a/ej2-asp-core-mvc/diagram/EJ2_ASP.NETCORE/getting-started.md +++ b/ej2-asp-core-mvc/diagram/EJ2_ASP.NETCORE/getting-started.md @@ -12,6 +12,8 @@ documentation: ug This section briefly explains about how to include [ASP.NET Core Diagram](https://www.syncfusion.com/aspnet-core-ui-controls/diagram) control in your ASP.NET Core application using Visual Studio. +> **Ready to streamline your Syncfusion® ASP.NET Core development?** Discover the full potential of Syncfusion® ASP.NET Core controls with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like Visual Studio, Visual Studio Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/aspnetcore/documentation/ai-coding-assistant/overview) + ## Prerequisites [System requirements for ASP.NET Core controls](https://ej2.syncfusion.com/aspnetcore/documentation/system-requirements) @@ -20,7 +22,7 @@ This section briefly explains about how to include [ASP.NET Core Diagram](https: * [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/getting-started/project-template) +* [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 diff --git a/ej2-asp-core-mvc/gantt/EJ2_ASP.MVC/getting-started.md b/ej2-asp-core-mvc/gantt/EJ2_ASP.MVC/getting-started.md index 089e4479de..d49b5027f2 100644 --- a/ej2-asp-core-mvc/gantt/EJ2_ASP.MVC/getting-started.md +++ b/ej2-asp-core-mvc/gantt/EJ2_ASP.MVC/getting-started.md @@ -13,6 +13,8 @@ documentation: ug This section briefly explains about how to include [ASP.NET MVC Gantt](https://www.syncfusion.com/aspnet-mvc-ui-controls/gantt-chart) control in your ASP.NET MVC application using Visual Studio. +> **Ready to streamline your Syncfusion® ASP.NET MVC development?** Discover the full potential of Syncfusion® ASP.NET MVC controls with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like Visual Studio, Visual Studio Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/aspnetmvc/documentation/ai-coding-assistant/overview) + ## Prerequisites [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) @@ -21,7 +23,7 @@ This section briefly explains about how to include [ASP.NET MVC Gantt](https://w * [Create a Project using Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app) -* [Create a Project using Syncfusion® ASP.NET MVC Extension](https://ej2.syncfusion.com/aspnetmvc/documentation/getting-started/project-template) +* [Create a Project using Syncfusion® ASP.NET MVC Extension](https://ej2.syncfusion.com/aspnetmvc/documentation/visual-studio-integration/create-project) ## Install ASP.NET MVC package in the application diff --git a/ej2-asp-core-mvc/gantt/EJ2_ASP.NETCORE/getting-started.md b/ej2-asp-core-mvc/gantt/EJ2_ASP.NETCORE/getting-started.md index db812aa180..0341270229 100644 --- a/ej2-asp-core-mvc/gantt/EJ2_ASP.NETCORE/getting-started.md +++ b/ej2-asp-core-mvc/gantt/EJ2_ASP.NETCORE/getting-started.md @@ -12,6 +12,8 @@ documentation: ug This section briefly explains how to include the [ASP.NET Core Gantt](https://www.syncfusion.com/aspnet-core-ui-controls/gantt-chart) control in your ASP.NET Core application using Visual Studio. +> **Ready to streamline your Syncfusion® ASP.NET Core development?** Discover the full potential of Syncfusion® ASP.NET Core controls with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like Visual Studio, Visual Studio Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/aspnetcore/documentation/ai-coding-assistant/overview) + To get started quickly with the ASP.NET Core Gantt Chart, watch the following video. It provides a step-by-step guide to project configuration and demonstrates the basic features and functionalities of the Gantt Chart: {% youtube "https://www.youtube.com/watch?v=tILyz8PyE6A" %} diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/getting-started-mvc.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/getting-started-mvc.md index 5def87de4c..10d856128e 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/getting-started-mvc.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/getting-started-mvc.md @@ -13,6 +13,8 @@ documentation: ug This section briefly explains about how to include [ASP.NET MVC Grid](https://www.syncfusion.com/aspnet-mvc-ui-controls/grid) control in your ASP.NET MVC application using Visual Studio. +> **Ready to streamline your Syncfusion® ASP.NET MVC development?** Discover the full potential of Syncfusion® ASP.NET MVC controls with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like Visual Studio, Visual Studio Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/aspnetmvc/documentation/ai-coding-assistant/overview) + ## Prerequisites [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) @@ -21,7 +23,7 @@ This section briefly explains about how to include [ASP.NET MVC Grid](https://ww * [Create a Project using Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app) -* [Create a Project using Syncfusion® ASP.NET MVC Extension](https://ej2.syncfusion.com/aspnetmvc/documentation/getting-started/project-template) +* [Create a Project using Syncfusion® ASP.NET MVC Extension](https://ej2.syncfusion.com/aspnetmvc/documentation/visual-studio-integration/create-project) ## Install ASP.NET MVC package in the application diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/getting-started-core.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/getting-started-core.md index a8c0016c87..ec8fce2d1e 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/getting-started-core.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/getting-started-core.md @@ -13,6 +13,8 @@ documentation: ug This section briefly explains about how to include [ASP.NET Core Grid](https://www.syncfusion.com/aspnet-core-ui-controls/grid) control in your ASP.NET Core application using Visual Studio. +> **Ready to streamline your Syncfusion® ASP.NET Core development?** Discover the full potential of Syncfusion® ASP.NET Core controls with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like Visual Studio, Visual Studio Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/aspnetcore/documentation/ai-coding-assistant/overview) + To get start quickly with ASP.NET Core Grid component, you can check on this video. {% youtube @@ -26,7 +28,7 @@ To get start quickly with ASP.NET Core Grid component, you can check on this vid * [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/getting-started/project-template) +* [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 diff --git a/ej2-asp-core-mvc/kanban/EJ2_ASP.MVC/getting-started.md b/ej2-asp-core-mvc/kanban/EJ2_ASP.MVC/getting-started.md index 695d3e03eb..96c6562663 100644 --- a/ej2-asp-core-mvc/kanban/EJ2_ASP.MVC/getting-started.md +++ b/ej2-asp-core-mvc/kanban/EJ2_ASP.MVC/getting-started.md @@ -13,6 +13,8 @@ documentation: ug This section briefly explains about how to include [ASP.NET MVC Kanban](https://www.syncfusion.com/aspnet-mvc-ui-controls/kanban-board) control in your ASP.NET MVC application using Visual Studio. +> **Ready to streamline your Syncfusion® ASP.NET MVC development?** Discover the full potential of Syncfusion® ASP.NET MVC controls with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like Visual Studio, Visual Studio Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/aspnetmvc/documentation/ai-coding-assistant/overview) + ## Prerequisites [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) @@ -21,7 +23,7 @@ This section briefly explains about how to include [ASP.NET MVC Kanban](https:// * [Create a Project using Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app) -* [Create a Project using Syncfusion® ASP.NET MVC Extension](https://ej2.syncfusion.com/aspnetmvc/documentation/getting-started/project-template) +* [Create a Project using Syncfusion® ASP.NET MVC Extension](https://ej2.syncfusion.com/aspnetmvc/documentation/visual-studio-integration/create-project) ## Install ASP.NET MVC package in the application diff --git a/ej2-asp-core-mvc/kanban/EJ2_ASP.NETCORE/getting-started.md b/ej2-asp-core-mvc/kanban/EJ2_ASP.NETCORE/getting-started.md index d66bfe3bce..a382081bb6 100644 --- a/ej2-asp-core-mvc/kanban/EJ2_ASP.NETCORE/getting-started.md +++ b/ej2-asp-core-mvc/kanban/EJ2_ASP.NETCORE/getting-started.md @@ -13,6 +13,8 @@ documentation: ug This section briefly explains about how to include [ASP.NET Core Kanban](https://www.syncfusion.com/aspnet-core-ui-controls/kanban-board) control in your ASP.NET Core application using Visual Studio. +> **Ready to streamline your Syncfusion® ASP.NET Core development?** Discover the full potential of Syncfusion® ASP.NET Core controls with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like Visual Studio, Visual Studio Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/aspnetcore/documentation/ai-coding-assistant/overview) + ## Prerequisites [System requirements for ASP.NET Core controls](https://ej2.syncfusion.com/aspnetcore/documentation/system-requirements) @@ -21,7 +23,7 @@ This section briefly explains about how to include [ASP.NET Core Kanban](https:/ * [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/getting-started/project-template) +* [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 diff --git a/ej2-asp-core-mvc/markdown-editor/EJ2_ASP.MVC/getting-started.md b/ej2-asp-core-mvc/markdown-editor/EJ2_ASP.MVC/getting-started.md index 469c8bea63..dbba234144 100644 --- a/ej2-asp-core-mvc/markdown-editor/EJ2_ASP.MVC/getting-started.md +++ b/ej2-asp-core-mvc/markdown-editor/EJ2_ASP.MVC/getting-started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started with ##Platform_Name## Rich Text Editor | Syncfusion -description: Checkout and learn about getting started with ##Platform_Name## Rich Text Editor control of Syncfusion Essential JS 2 and more details. +title: Getting Started with ##Platform_Name## Markdown Editor | Syncfusion +description: Checkout and learn about getting started with ##Platform_Name## Markdown Editor control of Syncfusion Essential JS 2 and more details. platform: ej2-asp-core-mvc control: Getting Started publishingplatform: ##Platform_Name## @@ -20,7 +20,7 @@ This section briefly explains about how to include [ASP.NET MVC Rich Text Editor * [Create a Project using Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app) -* [Create a Project using Syncfusion® ASP.NET MVC Extension](https://ej2.syncfusion.com/aspnetmvc/documentation/getting-started/project-template) +* [Create a Project using Syncfusion® ASP.NET MVC Extension](https://ej2.syncfusion.com/aspnetmvc/documentation/visual-studio-integration/create-project) ## Install ASP.NET MVC package in the application @@ -117,9 +117,9 @@ Configure the toolbar with the tools using `Items` field of the [ToolbarSettings * [Real time example using Rich Text Editor](https://ej2.syncfusion.com/aspnetmvc/RichTextEditor/Forums#/bootstrap5) * [How to insert Emoticons](https://ej2.syncfusion.com/aspnetmvc/RichTextEditor/InsertEmoticons#/material) -* [How to change the editor type](https://ej2.syncfusion.com/aspnetmvc/documentation/rich-text-editor/formation) -* [How to render the iframe](https://ej2.syncfusion.com/aspnetmvc/documentation/rich-text-editor/iframe) -* [How to render the toolbar in inline mode](https://ej2.syncfusion.com/aspnetmvc/documentation/rich-text-editor/inline-mode) +* [How to change the editor type](https://ej2.syncfusion.com/aspnetmvc/documentation/rich-text-editor/editor-types/editor-mode) +* [How to render the iframe](https://ej2.syncfusion.com/aspnetmvc/documentation/rich-text-editor/editor-types/iframe) +* [How to render the toolbar in inline mode](https://ej2.syncfusion.com/aspnetmvc/documentation/rich-text-editor/editor-types/inline-editing) * [Accessibility in Rich text editor](https://ej2.syncfusion.com/aspnetmvc/documentation/rich-text-editor/accessibility) * [Keyboard support in Rich text editor](https://ej2.syncfusion.com/aspnetmvc/documentation/rich-text-editor/keyboard-support) * [Globalization in Rich text editor](https://ej2.syncfusion.com/aspnetmvc/documentation/rich-text-editor/globalization) diff --git a/ej2-asp-core-mvc/pivot-table/EJ2_ASP.MVC/getting-started.md b/ej2-asp-core-mvc/pivot-table/EJ2_ASP.MVC/getting-started.md index 412f908e19..8cb36519e4 100644 --- a/ej2-asp-core-mvc/pivot-table/EJ2_ASP.MVC/getting-started.md +++ b/ej2-asp-core-mvc/pivot-table/EJ2_ASP.MVC/getting-started.md @@ -13,6 +13,8 @@ documentation: ug This section briefly explains about how to include [ASP.NET MVC Pivot Table](https://www.syncfusion.com/aspnet-mvc-ui-controls/pivot-table) control in your ASP.NET MVC application using Visual Studio. +> **Ready to streamline your Syncfusion® ASP.NET MVC development?** Discover the full potential of Syncfusion® ASP.NET MVC controls with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like Visual Studio, Visual Studio Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/aspnetmvc/documentation/ai-coding-assistant/overview) + ## Prerequisites [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) @@ -21,7 +23,7 @@ This section briefly explains about how to include [ASP.NET MVC Pivot Table](htt * [Create a Project using Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app) -* [Create a Project using Syncfusion® ASP.NET MVC Extension](https://ej2.syncfusion.com/aspnetmvc/documentation/getting-started/project-template) +* [Create a Project using Syncfusion® ASP.NET MVC Extension](https://ej2.syncfusion.com/aspnetmvc/documentation/visual-studio-integration/create-project) ## Install ASP.NET MVC package in the application diff --git a/ej2-asp-core-mvc/pivot-table/EJ2_ASP.NETCORE/getting-started.md b/ej2-asp-core-mvc/pivot-table/EJ2_ASP.NETCORE/getting-started.md index c7ccf7b619..2c85f342b3 100644 --- a/ej2-asp-core-mvc/pivot-table/EJ2_ASP.NETCORE/getting-started.md +++ b/ej2-asp-core-mvc/pivot-table/EJ2_ASP.NETCORE/getting-started.md @@ -13,6 +13,8 @@ documentation: ug This section briefly explains about how to include [ASP.NET Core Pivot Table](https://www.syncfusion.com/aspnet-core-ui-controls/pivot-table) control in your ASP.NET Core application using Visual Studio. +> **Ready to streamline your Syncfusion® ASP.NET Core development?** Discover the full potential of Syncfusion® ASP.NET Core controls with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like Visual Studio, Visual Studio Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/aspnetcore/documentation/ai-coding-assistant/overview) + ## Prerequisites [System requirements for ASP.NET Core controls](https://ej2.syncfusion.com/aspnetcore/documentation/system-requirements) @@ -21,7 +23,7 @@ This section briefly explains about how to include [ASP.NET Core Pivot Table](ht * [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/getting-started/project-template) +* [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 diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/getting-started.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/getting-started.md index 4da48254b3..eff1eb52f5 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/getting-started.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/getting-started.md @@ -13,6 +13,8 @@ documentation: ug This section briefly explains about how to include [ASP.NET MVC Rich Text Editor](https://www.syncfusion.com/aspnet-mvc-ui-controls/wysiwyg-rich-text-editor) control in your ASP.NET MVC application using Visual Studio. +> **Ready to streamline your Syncfusion® ASP.NET MVC development?** Discover the full potential of Syncfusion® ASP.NET MVC controls with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like Visual Studio, Visual Studio Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/aspnetmvc/documentation/ai-coding-assistant/overview) + ## Prerequisites [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) @@ -21,7 +23,7 @@ This section briefly explains about how to include [ASP.NET MVC Rich Text Editor * [Create a Project using Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app) -* [Create a Project using Syncfusion® ASP.NET MVC Extension](https://ej2.syncfusion.com/aspnetmvc/documentation/getting-started/project-template) +* [Create a Project using Syncfusion® ASP.NET MVC Extension](https://ej2.syncfusion.com/aspnetmvc/documentation/visual-studio-integration/create-project) ## Install ASP.NET MVC package in the application @@ -135,9 +137,9 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-MVC-Get * [Real time example using Rich Text Editor](https://ej2.syncfusion.com/aspnetmvc/RichTextEditor/Forums#/bootstrap5) * [How to insert Emoticons](https://ej2.syncfusion.com/aspnetmvc/RichTextEditor/InsertEmoticons#/material) -* [How to change the editor type](https://ej2.syncfusion.com/aspnetmvc/documentation/rich-text-editor/formation) -* [How to render the iframe](https://ej2.syncfusion.com/aspnetmvc/documentation/rich-text-editor/iframe) -* [How to render the toolbar in inline mode](https://ej2.syncfusion.com/aspnetmvc/documentation/rich-text-editor/inline-mode) +* [How to change the editor type](https://ej2.syncfusion.com/aspnetmvc/documentation/rich-text-editor/editor-types/editor-mode) +* [How to render the iframe](https://ej2.syncfusion.com/aspnetmvc/documentation/rich-text-editor/editor-types/iframe) +* [How to render the toolbar in inline mode](https://ej2.syncfusion.com/aspnetmvc/documentation/rich-text-editor/editor-types/inline-editing) * [Accessibility in Rich text editor](https://ej2.syncfusion.com/aspnetmvc/documentation/rich-text-editor/accessibility) * [Keyboard support in Rich text editor](https://ej2.syncfusion.com/aspnetmvc/documentation/rich-text-editor/keyboard-support) * [Globalization in Rich text editor](https://ej2.syncfusion.com/aspnetmvc/documentation/rich-text-editor/globalization) 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 new file mode 100644 index 0000000000..04c0f8181e --- /dev/null +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/selection.md @@ -0,0 +1,125 @@ +--- +layout: post +title: Selection in Syncfusion ##Platform_Name## Rich Text Editor Component +description: Learn here all about Slider-Based Text Selection in Syncfusion ##Platform_Name## Rich Text Editor component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Slider-Based Text Selection +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Selection in ##Platform_Name## Rich Text Editor Control + +## Text selection + +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. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/selection/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/selection/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/selection/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/selection/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Node selection + +Node selection allows users to programmatically select entire HTML elements (nodes) such as paragraphs, images, or tables within the Rich Text Editor. This is useful when you want to highlight or manipulate specific content blocks without relying on manual user selection. + +The following example demonstrates how to select a paragraph node programmatically using the browser's native `Range` and `Selection` API. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/node-selection/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/node-selection/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/node-selection/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/node-selection/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Cell selection + +Cell selection allows users to programmatically select specific table cells within the Rich Text Editor. This is useful for highlighting or manipulating content inside tables without requiring manual user interaction. + +The following example demonstrates how to select a table cell programmatically using the browser's native `Range` and `Selection` APIs. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/cell-selection/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/cell-selection/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/cell-selection/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/cell-selection/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Select all content + +To select all content within the Rich Text Editor, use the `selectAll` method. This method highlights all the text and elements inside the editor, allowing users to perform actions such as formatting or deleting the entire content. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/select-all/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/select-all/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/select-all/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/select-all/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} \ No newline at end of file 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 new file mode 100644 index 0000000000..fe10eb7882 --- /dev/null +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mail-merge.md @@ -0,0 +1,38 @@ +--- +layout: post +title: Mail merge in ##Platform_Name## RichTextEditor | Syncfusion +description: Learn about Mail merge in Syncfusion ##Platform_Name## RichTextEditor control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Mail merge +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Mail merge in ##Platform_Name## Rich Text Editor control + +The Rich Text Editor can be customized to implement **Mail Merge** functionality by inserting placeholders into the editor using custom toolbar items. These placeholders are later replaced with actual data to generate personalized content such as letters, invoices, and reports. + +This feature simplifies the creation of dynamic documents by allowing users to insert merge fields that are automatically populated with real data during content generation. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/mail-merge/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/mail-merge/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/mail-merge/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/mail-merge/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mentions.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mentions.md index 76711876e9..f8d284446b 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mentions.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mentions.md @@ -8,19 +8,86 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# Mentions in the ASP.NET Core Rich Text Editor Control +# Mentions in the ##Platform_Name## Rich Text Editor Control By integrating the [Mention](https://ej2.syncfusion.com/aspnetmvc/documentation/mention/getting-started) component with a Rich Text Editor, users can effortlessly mention or tag other users or objects from a suggested list. This eliminates the need to manually type out names or identifying information, improving efficiency and accuracy. +## Setup and configuration + Use the [Target](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_Target) property of the Mention component to specify the `ID` of the content editable div element within the Rich Text Editor. When setting the target, make sure to append the suffix `_rte-edit-view` to the ID. This allows you to enable the Mention functionality within the Rich Text Editor, so that users can mention or tag other users or objects from the suggested list while editing the text. +## Using mentions + When the user types the `@` symbol followed by a character, the Rich Text Editor displays a list of suggestions. Users can then select an item from the list by: * Clicking on it * Typing the name of the item they want to tag -In the following sample, we configured the following properties with popup dimensions. +## Customizing suggestion list + +### Minimum input length for Mention suggestions + +You can control when the suggestion list appears by setting the [MinLength](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_MinLength) property in the Mention control. This property defines the minimum number of characters a user must type after the mention character (@) to trigger the search action. This is especially useful when working with large datasets, as it helps reduce unnecessary queries and improves performance. + +By default, `MinLength` is set to 0, which means the suggestion list appears immediately after the mention character is entered. However, you can increase this value to delay the search until the user has typed a specific number of characters. + +In the following example, the `MinLength` is set to 3, so the suggestion list will only appear once the user types three or more characters after the @ symbol. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/mention-min-length/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/mention-min-length/EmployeeData.cs %} +{% endhighlight %} +{% endtabs %} + +### Customizing suggestion list count + +You can control the number of items displayed in the Mention suggestion list using the [SuggestionCount](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_SuggestionCount) property. This is particularly useful when working with large datasets, allowing you to limit the number of suggestions shown to the user. + +By default, the suggestion list displays 25 items. You can customize this value to show fewer or more items based on your application's needs. + +In the example below, the `SuggestionCount` is set to 5, so only 5 items will be displayed in the suggestion list when the user types the mention character (@). + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/mention-suggestion-count/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/mention-suggestion-count/EmployeeData.cs %} +{% endhighlight %} +{% endtabs %} + +### Customizing suggestion list using templates + +#### Item template + +You can customize how each item appears in the suggestion list using the [ItemTemplate](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_ItemTemplate) property. This allows you to display additional details such as email, role, or profile image alongside the mention name. + +#### Display template + +Use the [DisplayTemplate](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_DisplayTemplate) property to define how the selected mention appears in the editor content. + +For example, by default, the mention chip renders as: + +``` +@Selma Rose + +``` + +Using the `DisplayTemplate` property, you can customize it to render as a clickable link: + +``` +@Selma Rose + +``` + +This allows you to create more interactive and informative mentions within the editor. + +In the following sample, we configured the following properties: +* [DisplayTemplate](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_DisplayTemplate) -Used to customize how the selected value appears in the editor content. * [AllowSpaces](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_AllowSpaces) - Allow to continue search action if user enter space after mention character while searching. * [SuggestionCount](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_SuggestionCount) - The maximum number of items that will be displayed in the suggestion list. * [ItemTemplate](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_ItemTemplate) - Used to display the customized appearance in suggestion list. diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/style.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/style.md index c68fc25d9d..b08f535f31 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/style.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/style.md @@ -1,6 +1,6 @@ --- layout: post -title: Style in ##Platform_Name## Rich Text Editor Component +title: Style in Syncfusion ##Platform_Name## Rich Text Editor Component description: Learn here all about Style in Syncfusion ##Platform_Name## Rich Text Editor component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Style @@ -12,7 +12,20 @@ documentation: ug The content below outlines the CSS structure you can use to customize the appearance of the control according to your preferences. -## Customizing Rich Text Editor Content +## Styling the placeholder text + +Use the following CSS to customize the default color in the Rich Text Editor's placeholder. + +```CSS + +.e-richtexteditor .e-rte-placeholder { + color: blue; + font-family: monospace; +} + +``` + +## Styling the editor content area Use the following CSS to modify the default style of the Rich Text Editor's content area, including font properties, background, and text color. @@ -32,7 +45,7 @@ Use the following CSS to modify the default style of the Rich Text Editor's cont } ``` -## Customizing Rich Text Editor Toolbar +## Customizing the toolbar appearance Use the following CSS to customize the default color in the Rich Text Editor's toolbar icon. @@ -63,7 +76,7 @@ Use the following CSS to customize the default color in the Rich Text Editor's t } ``` -## Customizing Character Count Display +## Styling the character count display Use the following CSS to customize the default color in the Rich Text Editor's character count. @@ -79,7 +92,7 @@ Use the following CSS to customize the default color in the Rich Text Editor's c } ``` -## Customizing Border Color +## Modifying the editor container border Use the following CSS to customize the border color in the Rich Text Editor's container. @@ -90,4 +103,31 @@ Use the following CSS to customize the border color in the Rich Text Editor's co border-radius: 4px; } -``` \ No newline at end of file +``` + +## Highlighting specific text programmatically + +Programmatically highlight a portion of the text in the editor by setting the background color. This can be achieved by applying a background style to the selected text using the Rich Text Editor's `executeCommand` method. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/highlight-specific-line/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/highlight-specific-line/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/highlight-specific-line/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/highlight-specific-line/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/table.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/table.md index e1d5871de8..a86bf81259 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/table.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/table.md @@ -61,6 +61,39 @@ You can insert `Rows` above or below the selected table cell using the quick too ![Rich Text Editor table column](./images/table_column.png) +## Table column resizing + +The Rich Text Editor supports resizing of table columns, allowing users to adjust the size of individual columns to better fit their content. To resize a column, hover the pointer near the edge of a table cell until the resize cursor appears. Then, click and drag the cell border to modify the column size as needed. + +This feature provides flexibility in organizing tabular data and ensures that tables remain clear, structured, and easy to read, especially when working with varying content lengths or complex layouts. + +## Nesting tables + +The Rich Text Editor allows users to insert tables within other table cells, enabling the creation of nested tables. This feature is useful for building complex layouts such as structured forms, hierarchical data views, or detailed reports. Users can manually insert a nested table by placing the cursor inside a cell and using the table toolbar option or HTML source editing. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/nesting-table/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/nesting-table/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/nesting-table/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/nesting-table/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + ## Quick insert for table rows and columns The Rich Text Editor offers a simple and intuitive way to add rows and columns to your tables without interrupting your workflow. You can expand tables directly from the interface, no need to use toolbar buttons. diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/fullscreen-tool.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/fullscreen-tool.md new file mode 100644 index 0000000000..81892bfef4 --- /dev/null +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/fullscreen-tool.md @@ -0,0 +1,46 @@ +--- +layout: post +title: Fullscreen Mode in ##Platform_Name## Rich Text Editor Control | Syncfusion +description: Learn here all about Fullscreen Mode in Syncfusion ##Platform_Name## Rich Text Editor control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Fullscreen Mode +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Fullscreen Mode in ##Platform_Name## Rich Text Editor Control + +The Fullscreen mode allows the Rich Text Editor to expand and occupy the entire browser viewport. This provides a distraction-free editing experience and more space to work with content and toolbar features. + +You can enable fullscreen mode using the FullScreen icon toolbar button. Once activated, the editor transitions into fullscreen view, hiding other page elements and maximizing the editing area. + +## How it works + +Click the fullscreen icon in the toolbar to toggle fullscreen mode. When enabled, the editor: + +- Expands to fill the entire browser window. +- Adjusts its layout to optimize space for content and tools. +- Can be exited by clicking the same icon again or pressing the `Esc` key. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/fullscreen/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/fullscreen/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/fullscreen/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/fullscreen/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} \ No newline at end of file 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 4a07d31b28..50ce849adc 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 @@ -241,6 +241,14 @@ Below is an example of how to configure the Checklist in the Rich Text Editor: {% endtabs %} {% endif %} +## Nested list creation using Tab key + +In the Rich Text Editor, pressing the `Tab` key while the cursor is inside a list item automatically creates a nested list. This behavior allows users to structure their content hierarchically by indenting list items. Each press of the `Tab` key increases the nesting level, converting the current item into a sub-item of the previous one. + +Please refer to the below video for visual behavior and interaction examples: + +![Rich Text Editor list editing behaviour](../images/list-editing.gif) + ## Increase and decrease indent The Rich Text Editor allows you to set indentation for text blocks such as paragraphs, headings, or lists. This feature helps you visually organize and structure your content, making it easier to read and understand. @@ -422,6 +430,39 @@ Use the `Blockquote` tool in the editor below to see the feature in action. > In a markdown editor, blockquotes are represented using the `>` symbol. +### Nested blockquotes + +The Rich Text Editor also supports nested blockquotes, allowing one blockquote to be placed inside another. + +While the toolbar does not provide a direct method to apply blockquote formatting recursively (i.e., within an already blockquote section), nested blockquotes can still be achieved in the following ways: + +1. **Pasting preformatted content:** If you paste content that already contains nested blockquote tags (e.g., from another editor or email), the Rich Text Editor will preserve and render the nested structure correctly. +2. **Pre-loading nested blockquote HTML:** You can initialize the editor with nested blockquote content using the value property. +3. **Manual editing via Source Code view:** You can manually insert nested blockquote tags using the SourceCode toolbar option. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/nested-quotation-formatting/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/nested-quotation-formatting/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/nested-quotation-formatting/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/nested-quotation-formatting/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. diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/getting-started.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/getting-started.md index fc537ea94c..3012263ff0 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/getting-started.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Started with ##Platform_Name## Rich Text Editor Control | Syncfusion +title: Getting Started with ##Platform_Name## Rich Text Editor | Syncfusion description: Checkout and learn about getting started with ##Platform_Name## Rich Text Editor control of Syncfusion Essential JS 2 and more details. platform: ej2-asp-core-mvc control: Getting Started @@ -13,6 +13,8 @@ documentation: ug This section briefly explains about how to include [ASP.NET Core Rich Text Editor](https://www.syncfusion.com/aspnet-core-ui-controls/wysiwyg-rich-text-editor) control in your ASP.NET Core application using Visual Studio. +> **Ready to streamline your Syncfusion® ASP.NET Core development?** Discover the full potential of Syncfusion® ASP.NET Core controls with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like Visual Studio, Visual Studio Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/aspnetcore/documentation/ai-coding-assistant/overview) + To get start quickly with ASP.NET Core Rich Text Editor, you can check on this video: {% youtube "youtube:https://www.youtube.com/watch?v=lEyINv1RGu8"%} @@ -25,7 +27,7 @@ To get start quickly with ASP.NET Core Rich Text Editor, you can check on this v * [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/getting-started/project-template) +* [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 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 new file mode 100644 index 0000000000..04c0f8181e --- /dev/null +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/selection.md @@ -0,0 +1,125 @@ +--- +layout: post +title: Selection in Syncfusion ##Platform_Name## Rich Text Editor Component +description: Learn here all about Slider-Based Text Selection in Syncfusion ##Platform_Name## Rich Text Editor component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Slider-Based Text Selection +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Selection in ##Platform_Name## Rich Text Editor Control + +## Text selection + +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. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/selection/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/selection/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/selection/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/selection/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Node selection + +Node selection allows users to programmatically select entire HTML elements (nodes) such as paragraphs, images, or tables within the Rich Text Editor. This is useful when you want to highlight or manipulate specific content blocks without relying on manual user selection. + +The following example demonstrates how to select a paragraph node programmatically using the browser's native `Range` and `Selection` API. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/node-selection/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/node-selection/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/node-selection/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/node-selection/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Cell selection + +Cell selection allows users to programmatically select specific table cells within the Rich Text Editor. This is useful for highlighting or manipulating content inside tables without requiring manual user interaction. + +The following example demonstrates how to select a table cell programmatically using the browser's native `Range` and `Selection` APIs. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/cell-selection/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/cell-selection/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/cell-selection/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/cell-selection/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Select all content + +To select all content within the Rich Text Editor, use the `selectAll` method. This method highlights all the text and elements inside the editor, allowing users to perform actions such as formatting or deleting the entire content. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/select-all/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/select-all/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/select-all/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/select-all/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} \ No newline at end of file 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 new file mode 100644 index 0000000000..fe10eb7882 --- /dev/null +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mail-merge.md @@ -0,0 +1,38 @@ +--- +layout: post +title: Mail merge in ##Platform_Name## RichTextEditor | Syncfusion +description: Learn about Mail merge in Syncfusion ##Platform_Name## RichTextEditor control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Mail merge +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Mail merge in ##Platform_Name## Rich Text Editor control + +The Rich Text Editor can be customized to implement **Mail Merge** functionality by inserting placeholders into the editor using custom toolbar items. These placeholders are later replaced with actual data to generate personalized content such as letters, invoices, and reports. + +This feature simplifies the creation of dynamic documents by allowing users to insert merge fields that are automatically populated with real data during content generation. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/mail-merge/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/mail-merge/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/mail-merge/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/mail-merge/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mentions.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mentions.md index 0554f97257..407b7ade15 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mentions.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mentions.md @@ -12,15 +12,82 @@ documentation: ug By integrating the [Mention](https://ej2.syncfusion.com/aspnetcore/documentation/mention/getting-started) component with a Rich Text Editor, users can effortlessly mention or tag other users or objects from a suggested list. This eliminates the need to manually type out names or identifying information, improving efficiency and accuracy. +## Setup and configuration + Use the [target](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_Target) property of the Mention component to specify the `ID` of the content editable div element within the Rich Text Editor. When setting the target, make sure to append the suffix `_rte-edit-view` to the ID. This allows you to enable the Mention functionality within the Rich Text Editor, so that users can mention or tag other users or objects from the suggested list while editing the text. +## Using mentions + When the user types the `@` symbol followed by a character, the Rich Text Editor displays a list of suggestions. Users can then select an item from the list by: * Clicking on it * Typing the name of the item they want to tag -In the following sample, we configured the following properties with popup dimensions. +## Customizing suggestion list + +### Minimum input length for Mention suggestions + +You can control when the suggestion list appears by setting the [minLength](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_MinLength) property in the Mention control. This property defines the minimum number of characters a user must type after the mention character (@) to trigger the search action. This is especially useful when working with large datasets, as it helps reduce unnecessary queries and improves performance. + +By default, `minLength` is set to 0, which means the suggestion list appears immediately after the mention character is entered. However, you can increase this value to delay the search until the user has typed a specific number of characters. + +In the following example, the `minLength` is set to 3, so the suggestion list will only appear once the user types three or more characters after the @ symbol. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/mention-min-length/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/mention-min-length/EmployeeData.cs %} +{% endhighlight %} +{% endtabs %} + +### Customizing suggestion list count + +You can control the number of items displayed in the Mention suggestion list using the [suggestionCount](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_SuggestionCount) property. This is particularly useful when working with large datasets, allowing you to limit the number of suggestions shown to the user. + +By default, the suggestion list displays 25 items. You can customize this value to show fewer or more items based on your application's needs. + +In the example below, the `suggestionCount` is set to 5, so only 5 items will be displayed in the suggestion list when the user types the mention character (@). + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/mention-suggestion-count/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/mention-suggestion-count/EmployeeData.cs %} +{% endhighlight %} +{% endtabs %} + +### Customizing suggestion list using templates + +#### Item template + +You can customize how each item appears in the suggestion list using the [itemTemplate](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_ItemTemplate) property. This allows you to display additional details such as email, role, or profile image alongside the mention name. + +#### Display template + +Use the [displayTemplate](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_DisplayTemplate) property to define how the selected mention appears in the editor content. + +For example, by default, the mention chip renders as: + +``` +@Selma Rose + +``` + +Using the `displayTemplate` property, you can customize it to render as a clickable link: + +``` +@Selma Rose + +``` + +This allows you to create more interactive and informative mentions within the editor. + +In the following sample, we configured the following properties: +* [displayTemplate](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_DisplayTemplate) -Used to customize how the selected value appears in the editor content. * [allowSpaces](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_AllowSpaces) - Allow to continue search action if user enter space after mention character while searching. * [suggestionCount](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_SuggestionCount) - The maximum number of items that will be displayed in the suggestion list. * [itemTemplate](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_ItemTemplate) - Used to display the customized appearance in suggestion list. diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/style.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/style.md index 682a1cb524..222232f792 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/style.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/style.md @@ -1,6 +1,6 @@ --- layout: post -title: Style in ##Platform_Name## Rich Text Editor Component +title: Style in Syncfusion ##Platform_Name## Rich Text Editor Control description: Learn here all about Style in Syncfusion ##Platform_Name## Rich Text Editor component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Style @@ -12,7 +12,7 @@ documentation: ug The content below outlines the CSS structure you can use to customize the appearance of the control according to your preferences. -## Customizing placeholder text +## Styling the placeholder text Use the following CSS to customize the default color in the Rich Text Editor's placeholder. @@ -25,7 +25,7 @@ Use the following CSS to customize the default color in the Rich Text Editor's p ``` -## Customizing editor content +## Styling the editor content area Use the following CSS to modify the default style of the Rich Text Editor's content area, including font properties, background, and text color. @@ -45,7 +45,7 @@ Use the following CSS to modify the default style of the Rich Text Editor's cont } ``` -## Customizing editor toolbar +## Customizing the toolbar appearance Use the following CSS to customize the default color in the Rich Text Editor's toolbar icon. @@ -76,7 +76,7 @@ Use the following CSS to customize the default color in the Rich Text Editor's t } ``` -## Customizing character count display +## Styling the character count display Use the following CSS to customize the default color in the Rich Text Editor's character count. @@ -92,7 +92,7 @@ Use the following CSS to customize the default color in the Rich Text Editor's c } ``` -## Customizing border color +## Modifying the editor container border Use the following CSS to customize the border color in the Rich Text Editor's container. @@ -105,7 +105,7 @@ Use the following CSS to customize the border color in the Rich Text Editor's co ``` -## Highlight the specific lines +## Highlighting specific text programmatically Programmatically highlight a portion of the text in the editor by setting the background color. This can be achieved by applying a background style to the selected text using the Rich Text Editor's `executeCommand` method. diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/table.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/table.md index 1db2fe505c..5c7f9eb720 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/table.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/table.md @@ -61,6 +61,39 @@ You can insert `Rows` above or below the selected table cell using the quick too ![Rich Text Editor table column](./images/table_column.png) +## Table column resizing + +The Rich Text Editor supports resizing of table columns, allowing users to adjust the size of individual columns to better fit their content. To resize a column, hover the pointer near the edge of a table cell until the resize cursor appears. Then, click and drag the cell border to modify the column size as needed. + +This feature provides flexibility in organizing tabular data and ensures that tables remain clear, structured, and easy to read, especially when working with varying content lengths or complex layouts. + +## Nesting tables + +The Rich Text Editor allows users to insert tables within other table cells, enabling the creation of nested tables. This feature is useful for building complex layouts such as structured forms, hierarchical data views, or detailed reports. Users can manually insert a nested table by placing the cursor inside a cell and using the table toolbar option or HTML source editing. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/nesting-table/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/nesting-table/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/nesting-table/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/nesting-table/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + ## Quick insert for table rows and columns The Rich Text Editor offers a simple and intuitive way to add rows and columns to your tables without interrupting your workflow. You can expand tables directly from the interface, no need to use toolbar buttons. diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/fullscreen-tool.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/fullscreen-tool.md new file mode 100644 index 0000000000..b07bb37f67 --- /dev/null +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/fullscreen-tool.md @@ -0,0 +1,46 @@ +--- +layout: post +title: Fullscreen Mode in ##Platform_Name## Rich Text Editor Control | Syncfusion +description: Learn here all about Fullscreen Mode in Syncfusion ##Platform_Name## Rich Text Editor control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Fullscreen Mode +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Fullscreen Mode in ##Platform_Name## Rich Text Editor Control + +The Fullscreen mode allows the Rich Text Editor to expand and occupy the entire browser viewport. This provides a distraction-free editing experience and more space to work with content and toolbar features. + +You can enable fullscreen mode using the FullScreen icon toolbar button. Once activated, the editor transitions into fullscreen view, hiding other page elements and maximizing the editing area. + +## How it works + +Click the fullscreen icon in the toolbar to toggle fullscreen mode. When enabled, the editor: + +- Expands to fill the entire browser window. +- Adjusts its layout to optimize space for content and tools. +- Can be exited by clicking the same icon again or pressing the `Esc` key. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/fullscreen/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/fullscreen/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/fullscreen/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/fullscreen/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} 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 336e9141d0..b4960173d6 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 @@ -241,6 +241,14 @@ Below is an example of how to configure the Checklist in the Rich Text Editor: {% endtabs %} {% endif %} +## Nested list creation using Tab key + +In the Rich Text Editor, pressing the `Tab` key while the cursor is inside a list item automatically creates a nested list. This behavior allows users to structure their content hierarchically by indenting list items. Each press of the `Tab` key increases the nesting level, converting the current item into a sub-item of the previous one. + +Please refer to the below video for visual behavior and interaction examples: + +![Rich Text Editor list editing behaviour](../images/list-editing.gif) + ## Increase and decrease indent The Rich Text Editor allows you to set indentation for text blocks such as paragraphs, headings, or lists. This feature helps you visually organize and structure your content, making it easier to read and understand. @@ -422,6 +430,39 @@ Use the `Blockquote` tool in the editor below to see the feature in action. > In a markdown editor, blockquotes are represented using the `>` symbol. +### Nested blockquotes + +The Rich Text Editor also supports nested blockquotes, allowing one blockquote to be placed inside another. + +While the toolbar does not provide a direct method to apply blockquote formatting recursively (i.e., within an already blockquote section), nested blockquotes can still be achieved in the following ways: + +1. **Pasting preformatted content:** If you paste content that already contains nested blockquote tags (e.g., from another editor or email), the Rich Text Editor will preserve and render the nested structure correctly. +2. **Pre-loading nested blockquote HTML:** You can initialize the editor with nested blockquote content using the value property. +3. **Manual editing via Source Code view:** You can manually insert nested blockquote tags using the SourceCode toolbar option. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/nested-quotation-formatting/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/nested-quotation-formatting/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/nested-quotation-formatting/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/nested-quotation-formatting/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. 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 new file mode 100644 index 0000000000..2b004d0e7b Binary files /dev/null and b/ej2-asp-core-mvc/rich-text-editor/images/list-editing.gif differ diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/getting-started.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/getting-started.md index c5e057c7b0..50e37ed8ff 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/getting-started.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/getting-started.md @@ -13,6 +13,8 @@ documentation: ug This section briefly explains about how to include [ASP.NET MVC Scheduler](https://www.syncfusion.com/aspnet-mvc-ui-controls/scheduler) control in your ASP.NET MVC application using Visual Studio. +> **Ready to streamline your Syncfusion® ASP.NET MVC development?** Discover the full potential of Syncfusion® ASP.NET MVC controls with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like Visual Studio, Visual Studio Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/aspnetmvc/documentation/ai-coding-assistant/overview) + ## Prerequisites [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) @@ -21,7 +23,7 @@ This section briefly explains about how to include [ASP.NET MVC Scheduler](https * [Create a Project using Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app) -* [Create a Project using Syncfusion® ASP.NET MVC Extension](https://ej2.syncfusion.com/aspnetmvc/documentation/getting-started/project-template) +* [Create a Project using Syncfusion® ASP.NET MVC Extension](https://ej2.syncfusion.com/aspnetmvc/documentation/visual-studio-integration/create-project) ## Install ASP.NET MVC package in the application diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/getting-started.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/getting-started.md index 569b8de387..f6db0733cd 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/getting-started.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/getting-started.md @@ -13,6 +13,8 @@ documentation: ug This section briefly explains about how to include [ASP.NET Core Schedule](https://www.syncfusion.com/aspnet-core-ui-controls/scheduler) control in your ASP.NET Core application using Visual Studio. +> **Ready to streamline your Syncfusion® ASP.NET Core development?** Discover the full potential of Syncfusion® ASP.NET Core controls with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like Visual Studio, Visual Studio Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/aspnetcore/documentation/ai-coding-assistant/overview) + To get start quickly with ASP.NET Core Scheduler, you can check on this video: {% youtube @@ -26,7 +28,7 @@ To get start quickly with ASP.NET Core Scheduler, you can check on this video: * [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/getting-started/project-template) +* [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 diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index 41a76bc69a..5bfd04cf54 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -16,6 +16,12 @@
  • Model Binding in Razor Pages
  • +
  • AI Coding Assistant + +
  • Installation
  • Validation and Security @@ -2219,6 +2227,7 @@
  • Link Manipulation
  • +
  • Selection
  • Disabling the Rich Text Editor
  • Character Count
  • Code View Support
  • @@ -2998,7 +3007,7 @@
  • 2025 Volume 3 - 31.*
  • Style Encapsulation
  • +
  • Selection
  • Disabling the Rich Text Editor
  • Character Count
  • Code View Support
  • @@ -2947,7 +2956,7 @@
  • 2025 Volume 3 - 31.*