diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/Syncfusion-Notifications.md b/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/Syncfusion-Notifications.md index 2e50789a8b..b64766b7d6 100644 --- a/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/Syncfusion-Notifications.md +++ b/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/Syncfusion-Notifications.md @@ -10,7 +10,7 @@ documentation: ug # Syncfusion® Notifications -Syncfusion® enhances the user experience in ASP.NET MVC applications through notification messages. These notifications cover various aspects, including alerts for trial applications when utilizing Syncfusion® trial assemblies, updates regarding the availability of the latest Syncfusion® NuGet package, and notifications regarding newer releases of Essential Studio®. By keeping users informed, Syncfusion® ensures that developers stay updated with Syncfusion® latest features and enhancements. +Syncfusion® enhances the user experience in ASP.NET MVC applications through notification messages. These notifications cover various aspects, including alerts for trial applications when utilizing Syncfusion® trial assemblies, updates regarding the availability of the latest Syncfusion® NuGet package, and notifications regarding newer releases of Essential Studio®. By keeping users informed, Syncfusion® ensures that developers stay updated with Syncfusion®'s latest features and enhancements. N> The Syncfusion® Notification feature is available from Essential Studio® v22.1.34. diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/check-for-updates.md b/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/check-for-updates.md index cefeeda896..837c67fc06 100644 --- a/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/check-for-updates.md +++ b/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/check-for-updates.md @@ -10,7 +10,7 @@ documentation: ug # Check for Updates in ASP.NET MVC Application -Syncfusion® provides the check for update extensions to find latest version of essential release was available, if it was available then provide option update most recent version of the Essential Studio® release. So that, you always get the latest features, fixes, and improvements by installing the latest version. +Syncfusion® provides the check for update extensions to find the latest version of the essential release. If it is available, then provide the option to update to the most recent version of the Essential Studio® release. Installing the latest version ensures you consistently receive the newest features, fixes, and enhancements. N> The Syncfusion® Check for updates is available from v17.1.0.32. diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/convert-project.md b/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/convert-project.md index 8eebda52ab..acd393d31a 100644 --- a/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/convert-project.md +++ b/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/convert-project.md @@ -12,7 +12,7 @@ documentation: ug Syncfusion® ASP.NET MVC conversion is a Visual Studio add-in that converts an existing ASP.NET MVC application into a Syncfusion® ASP.NET MVC (Essential JS 2) Web application by adding the required assemblies and resource files. -N> The Syncfusion® ASP.NET MVC (Essential JS 2) Web Application Project conversion utility is available from v16.3.0.17. Before use, the Syncfusion® ASP.NET MVC Project Conversion, check whether the **ASP.NET MVC Extensions - Syncfusion** installed or not in Visual Studio Extension Manager by clicking on the **Extensions -> Manage Extensions -> Installed** for Visual Studio 2019 or later and for Visual Studio 2017 or lower by clicking on the **Tools -> Extensions and Updates -> Installed**. If this extension not installed, install the extension by follow the steps from the [download and installation](download-and-installation) help topic. Also, check whether the corresponding Essential Studio® version build installed or not. If the Essential Studio® version is not same for both the Extension and build, then the Project Conversion will not be shown. +N> The Syncfusion® ASP.NET MVC (Essential JS 2) Web Application Project conversion utility is available from v16.3.0.17. Before using, the Syncfusion® ASP.NET MVC Project Conversion, check whether the **ASP.NET MVC Extensions - Syncfusion** is installed or not in Visual Studio Extension Manager by clicking **Extensions -> Manage Extensions -> Installed** for Visual Studio 2019 or later and for Visual Studio 2017 or lower by clicking on the **Tools -> Extensions and Updates -> Installed**. If this extension is not installed, install the extension by follow the steps from the [download and installation](download-and-installation) help topic. Also, check whether the corresponding Essential Studio® version build installed or not. If the Essential Studio® version is not the same for both the extension and the build, then the project conversion will not be shown. The steps below help you to convert the ASP.NET MVC application to the Syncfusion® ASP.NET MVC application via the Visual Studio: @@ -22,7 +22,7 @@ The steps below help you to convert the ASP.NET MVC application to the Syncfusio **Option 1:** - Click **Extensions->Syncfusion Menu** and choose **Essential Studio® for ASP.NET MVC > Convert to Syncfusion ASP.NET MVC Application…** in **Visual Studio Menu**. + Click **Extensions->Syncfusion® Menu** and choose **Essential Studio® for ASP.NET MVC > Convert to Syncfusion® ASP.NET MVC Application…** in **Visual Studio Menu**. ![selected microsoft aspmvc](images/selected-microsoft-mvc-application.png) @@ -46,15 +46,15 @@ The steps below help you to convert the ASP.NET MVC application to the Syncfusio **Assets From**: Load the Syncfusion® Essential JS 2 assets to ASP.NET MVC Project, from either NuGet, CDN, or Installed Location. - N> Installed location option will be available only when the Syncfusion® Essential JavaScript 2 setup has been installed. + N> The **Installed Location** option will be available only when the Syncfusion® Essential JavaScript 2 setup has been installed. **Choose the Theme**: Choose the required theme. 4. Check the **“Enable a backup before converting”** checkbox if you want to take the project backup and choose the location. -5. The required Syncfusion ASP.NET MVC NuGet packages with selected version, scripts and styles are included in the ASP.NET MVC Web Application. +5. The required Syncfusion® ASP.NET MVC NuGet packages with selected versions, scripts, and styles are included in the ASP.NET MVC Web Application. - if you enabled project backup before converting, the old project was saved in the specified backup path location, as shown below once the conversion process completed. + If you enabled project backup before converting, the old project was saved in the specified backup path location, as shown below, once the conversion process was completed. ![BackupLocation](images/BackupLocation.png) diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/create-project.md b/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/create-project.md index eff5ea3541..9f7a974be2 100644 --- a/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/create-project.md +++ b/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/create-project.md @@ -18,7 +18,7 @@ N> The Syncfusion® ASP.NET MVC (Essential JS 2) project templates are available Use the following steps to create the **Syncfusion ASP.NET MVC (Essential JS 2) Web Application** through the **Visual Studio Project Template.** -N> Before use the Syncfusion® ASP.NET MVC Project Template, check whether the **ASP.NET MVC Extensions - Syncfusion** installed or not in Visual Studio Extension Manager by clicking on the **Extensions -> Manage Extensions -> Installed** for Visual Studio 2019 or later and for Visual Studio 2017 or lower by clicking on the **Tools -> Extensions and Updates -> Installed**. If this extension not installed, install the extension by follow the steps from the [download and installation](download-and-installation) help topic. +N> Before using the Syncfusion® ASP.NET MVC Project Template, check whether the **ASP.NET MVC Extensions - Syncfusion** installed or not in Visual Studio Extension Manager by clicking on the **Extensions -> Manage Extensions -> Installed** for Visual Studio 2019 or later and for Visual Studio 2017 or lower by clicking on the **Tools -> Extensions and Updates -> Installed**. If this extension is not installed, install the extension by following the steps from the [download and installation](download-and-installation) help topic. 1. To create the Syncfusion® ASP.NET MVC (Essential JS 2) project, follow either one of the options below: @@ -56,13 +56,13 @@ N> Before use the Syncfusion® ASP.NET MVC Project Template, check whether the * **Assets From**: : Load the Syncfusion® Essential JS 2 assets to ASP.NET MVC Project, either NuGet, CDN, or Installed Location. - N> Installed location option will be available only when the Syncfusion® Essential JavaScript 2 setup has been installed. + N> The **Installed Location** option will be available only when the Syncfusion® Essential JavaScript 2 setup has been installed. 3. Click **Create**, the Syncfusion ASP.NET MVC (Essential JS 2) Application will be created. ![readme-file](images/readme-file.PNG) -4. The created Syncfusion ASP.NET MVC application configures with most recent Syncfusion ASP.NET MVC NuGet packages, selected style and scripts for use Syncfusion® components. +4. The created Syncfusion ASP.NET MVC application is configured with the most recent Syncfusion ASP.NET MVC NuGet packages and selected styles and scripts for using Syncfusion® components. 5. Then, the Syncfusion® licensing registration required message box will be shown, if you installed the trial setup or NuGet packages since Syncfusion® introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio® release. Navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/license-key#how-to-generate-syncfusion-license-key), which is shown in the licensing message box to generate and register the Syncfusion® license key to your project. Refer to this [blog](https://blog.syncfusion.com/post/whats-new-in-2018-volume-2-licensing-changes-in-the-1620x-version-of-essential-studio.aspx) post to learn more about the licensing changes introduced in Essential Studio®. diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/create-sample.md b/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/create-sample.md index fc71652331..afe9e9c9ec 100644 --- a/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/create-sample.md +++ b/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/create-sample.md @@ -66,8 +66,8 @@ Use the following steps to create the Syncfusion® ASP.NET MVC (Essential JS 2) ![sample creator theme selection](images/aspnet-mvc-samplecreator.png) -2. Click **Create** button. After creating the project, open the project by clicking **Yes**. If you click **No**, the corresponding location of the project will be opened. Refer to the following screenshot for more information. +2. Click the **Create** button. After creating the project, open the project by clicking **Yes**. If you click **No**, the corresponding location of the project will be opened. Refer to the following screenshot for more information. ![create](images/sample-creator-create.png) -3. The new Syncfusion® ASP.NET MVC sample is created. Required controller and view file for selected controls, selected style, scripts and corresponding Syncfusion® NuGet packages are added in the created sample. +3. The new Syncfusion® ASP.NET MVC sample is created. Required controller and view files for selected controls, selected styles, scripts, and corresponding Syncfusion® NuGet packages are added in the created sample. diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/download-and-installation.md b/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/download-and-installation.md index ab241ab8e2..edbb1f53bd 100644 --- a/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/download-and-installation.md +++ b/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/download-and-installation.md @@ -10,7 +10,7 @@ documentation: ug # Download and Installation -Syncfusion® publishes the Visual Studio extension in the below Visual Studio marketplace link. You can either install it directly from Visual Studio or download and install it from the Visual Studio marketplace. +Syncfusion® publishes the Visual Studio extension at the Visual Studio Marketplace link provided below. You can either install it directly from Visual Studio or download and install it from the Visual Studio marketplace. [Visual Studio 2022](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.ASPNETMVCVSExtensions) @@ -18,7 +18,7 @@ Syncfusion® publishes the Visual Studio extension in the below Visual Studio ma ## Prerequisites -The following software prerequisites must be installed to install the Syncfusion® ASP.NET MVC extension, as well as to creating, adding snippet, converting, and upgrading Syncfusion® ASP.NET MVC applications. +The following software prerequisites must be installed to install the Syncfusion® ASP.NET MVC extension, as well as to create, add snippets, convert, and upgrade Syncfusion® ASP.NET MVC applications. * [Visual Studio 2013 or later](https://visualstudio.microsoft.com/downloads). @@ -64,7 +64,7 @@ The steps below illustrate how to download and install the Syncfusion ASP.NET MV 2. Close all Visual Studio instances running, if any. -3. Double-click to install the downloaded VSIX file. You will see the VSIX installation prompts with the corresponding installed Visual Studio version checkbox for select the Visual Studio to install extension. +3. Double-click to install the downloaded VSIX file. You will see the VSIX installation prompts with the corresponding installed Visual Studio version checkbox to select the Visual Studio to install the extension. ![VSIX-Installation-Window](images/InstallVSIX.png) diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/images/SyncfusionMvcProjectWizard.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/images/SyncfusionMvcProjectWizard.png index 6c674bff53..d579846ec1 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/images/SyncfusionMvcProjectWizard.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/images/SyncfusionMvcProjectWizard.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/images/convert-syncfusion-aspmvc-application.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/images/convert-syncfusion-aspmvc-application.png index d69aebb376..6b533a6731 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/images/convert-syncfusion-aspmvc-application.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/images/convert-syncfusion-aspmvc-application.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/images/migrate-essentialJs2.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/images/migrate-essentialJs2.png index a3f83324ba..dfa1cde96d 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/images/migrate-essentialJs2.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/images/migrate-essentialJs2.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/images/migrate-project-latest.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/images/migrate-project-latest.png index 334a930d9e..5bf4fc46f3 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/images/migrate-project-latest.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/images/migrate-project-latest.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/images/selected-microsoft-mvc-application.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/images/selected-microsoft-mvc-application.png index 025762869e..9c82bf8c1a 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/images/selected-microsoft-mvc-application.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/images/selected-microsoft-mvc-application.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/overview.md b/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/overview.md index 3ea2941360..c2c6b85b13 100644 --- a/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/overview.md +++ b/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/overview.md @@ -14,7 +14,7 @@ documentation: ug The Syncfusion® ASP.NET MVC (Essential JS 2) Visual Studio Extensions can be accessed through the Syncfusion Menu to create and configure the project with Syncfusion® references in Visual Studio. -N> Syncfusion® Extension is published in the Visual Studio Marketplace. We provided Separate ASP.NET Core (Essential JS 2) Extension support for Visual Studio 2022 and Visual Studio 2019 or lower. Refer below Visual Marketplace link. +N> The Syncfusion® Extension is published in the Visual Studio Marketplace. We provided separate ASP.NET Core (Essential JS 2) extension support for Visual Studio 2022 and Visual Studio 2019 or lower. Refer to the below Visual Marketplace link. [Visual Studio 2022](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.ASPNETMVCVSExtensions) diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/scaffolding.md b/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/scaffolding.md index f1a7ae26be..9c29adc15b 100644 --- a/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/scaffolding.md +++ b/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/scaffolding.md @@ -10,9 +10,9 @@ documentation: ug # Scaffolding in ASP.NET MVC Application -Syncfusion® provides **Visual Studio Scaffolding**for Syncfusion® ASP.NET MVC platform to quickly add code that interacts with data models and reduce the amount of time to develop with data operation in your project. Scaffolding provides an easier way to create Views and Controller action methods for Syncfusion® ASP.NET MVC DataGrid, Charts, and Scheduler controls. +Syncfusion® provides **Visual Studio Scaffolding** for the Syncfusion® ASP.NET MVC platform to quickly add code that interacts with data models and reduce the amount of time to develop data operations in your project. Scaffolding provides an easier way to create views and controller action methods for Syncfusion® ASP.NET MVC DataGrid, Charts, and Scheduler controls. -N> The Syncfusion ASP.NET MVC UI Scaffolder is available from v16.4.0.40. +N> The Syncfusion® ASP.NET MVC UI Scaffolder is available from v16.4.0.40. The following steps explain you how to add a scaffolded item to your ASP.NET MVC Web application. @@ -22,19 +22,20 @@ N> Before use, the Syncfusion® ASP.NET MVC Scaffolding, check whether the **ASP ![scaffolding item](images/scaffold-item.png) -2. In the **Add Scaffold** dialog, select **Syncfusion ASP.NET MVC UI Scaffolder**, and then click **‘Add’**. +2. In the **Add Scaffold** dialog, select **Syncfusion® + ASP.NET MVC UI Scaffolder**, and then click **‘Add’**. ![syncfusion aspnetmvc ui scaffolder](images/mvc-ui-scaffolder.png) -3. In the Syncfusion UI Scaffolding dialog, select the desired control to perform scaffolding, and then click **Next**. +3. In the Syncfusion® UI Scaffolding dialog, select the desired control to perform scaffolding, and then click **Next**. ![syncfusion ui scaffolding](images/syncfusion-ui-scaffolding.png) -4. Selected control model dialogue will be launched in the Syncfusion UI Scaffolder. Enter the **Controller Name** and **View Name** as application requirements, and then select the required **Model Class** of the active project and its relevant **Data Context Class**, and then click **Next**. +4. Selected control model dialogue will be launched in the Syncfusion® UI Scaffolder. Enter the **Controller Name** and **View Name** as application requirements, and then select the required **Model Class** of the active project and its relevant **Data Context Class**, and then click **Next**. ![syncfusion ui scaffolding for datagrid](images/ui-scaffolding-datagrid.png) -5. Selected control feature dialogue will be launched in the Syncfusion UI Scaffolder. Select the required features, update the required data field, and then click **Add**. +5. Selected control feature dialogue will be launched in the Syncfusion® UI Scaffolder. Select the required features, update the required data field, and then click **Add**. ![syncfusion scaffolding add button](images/scaffolding-add-button.png) @@ -44,7 +45,7 @@ N> Before use, the Syncfusion® ASP.NET MVC Scaffolding, check whether the **ASP 7. If you installed the trial setup or NuGet packages from nuget.org you have to register the Syncfusion® license key to your project since Syncfusion® introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio® release. Navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/license-key#how-to-generate-syncfusion-license-key) to generate and register the Syncfusion® license key to your project. Refer to this [blog](https://blog.syncfusion.com/post/Whats-New-in-2018-Volume-2-Licensing-Changes-in-the-1620x-Version-of-Essential-Studio.aspx?_ga=2.11237684.1233358434.1587355730-230058891.1567654773) post for understanding the licensing changes introduced in Essential Studio®. -N> Ensure that at least one Entity Framework model exists, and the application has been compiled once. If no Entity Framework model exist in your application, refer to this [documentation](https://docs.microsoft.com/en-us/aspnet/mvc/overview/getting-started/database-first-development/creating-the-web-application#generate-the-models) to generate the Entity Framework model. After the model file has been added, ensure that the required DBContext and properties have been added. Now, build the application, and try scaffolding. If any changes have been done in the model properties, rebuild the application once before perform scaffolding. +N> Ensure that at least one Entity Framework model exists, and the application has been compiled once. If no Entity Framework model exist in your application, refer to this [documentation](https://docs.microsoft.com/en-us/aspnet/mvc/overview/getting-started/database-first-development/creating-the-web-application#generate-the-models) to generate the Entity Framework model. After the model file has been added, ensure that the required DBContext and properties have been added. Now, build the application, and try scaffolding. If any changes have been done in the model properties, rebuild the application once before performing scaffolding. Refer to the following UG links to render Syncfusion® control after performed scaffolding. diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/upgrade-project.md b/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/upgrade-project.md index cbbcf97696..26f87c969f 100644 --- a/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/upgrade-project.md +++ b/ej2-asp-core-mvc/EJ2_ASP.MVC/visual-studio-integration/upgrade-project.md @@ -8,15 +8,15 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# Upgrading Syncfusion ASP.NET MVC application to latest version +# Upgrading Syncfusion® ASP.NET MVC application to latest version The Syncfusion® ASP.NET MVC migration add-in for Visual Studio allows you to migrate an existing Syncfusion® ASP.NET MVC application from one version of Essential Studio® version to another version. This reduces the amount of manual work required when migrating the Syncfusion® version. ## IMPORTANT -The Syncfusion ASP.NET MVC (Essential JS 2) Web Application Project Migration utility is available from v16.3.0.17. +The Syncfusion® ASP.NET MVC (Essential JS 2) Web Application Project Migration utility is available from v16.3.0.17. -N> Before use, the Syncfusion® ASP.NET MVC Project Migration, check whether the **ASP.NET MVC Extensions - Syncfusion** installed or not in Visual Studio Extension Manager by clicking on the **Extensions -> Manage Extensions -> Installed** for Visual Studio 2019 or later and for Visual Studio 2017 or lower by clicking on the **Tools -> Extensions and Updates -> Installed**. If this extension not installed, install the extension by follow the steps from the [download and installation](download-and-installation) help topic. Also, check whether the corresponding Essential Studio® version build installed or not. If the Essential Studio® version is not same for both the Extension and build, then the Project Migration will not be shown. +N> Before using, the Syncfusion® ASP.NET MVC Project Migration, check whether the **ASP.NET MVC Extensions - Syncfusion®** installed or not in Visual Studio Extension Manager by clicking on the **Extensions -> Manage Extensions -> Installed** for Visual Studio 2019 or later and for Visual Studio 2017 or lower by clicking on the **Tools -> Extensions and Updates -> Installed**. If this extension is not installed, install the extension by following the steps from the [download and installation](download-and-installation) help topic. Also, check whether the corresponding Essential Studio® version build is installed or not. If the Essential Studio® version is not the same for both the extension and the build, then the Project Migration will not be shown. The steps below will assist you to upgrade the Syncfusion® version in the Syncfusion® ASP.NET MVC application via Visual Studio 2019: @@ -30,13 +30,13 @@ The steps below will assist you to upgrade the Syncfusion® version in the Syncf ![migrate project](images/migrate-project-latest.png) - N> In Visual Studio 2017 or lower, Click Syncfusion Menu and choose Essential Studio® for ASP.NET MVC > Migrate Project… in Visual Studio Menu. + N> In Visual Studio 2017 or lower, Click Syncfusion® Menu and choose Essential Studio® for ASP.NET MVC > Migrate Project… in Visual Studio Menu. ![migrate project](images/migrate-project.png) **Option 2**: - Right-click the **Syncfusion ASP.NET MVC Application** from Solution Explorer and select **Syncfusion Web**. Choose **Migrate the Syncfusion ASP.NET MVC Project to Another Version…** + Right-click the **Syncfusion® ASP.NET MVC Application** from Solution Explorer and select **Syncfusion® Web**. Choose **Migrate the Syncfusion® ASP.NET MVC Project to Another Version…** ![migrate the essential js2](images/migrate-essentialJs2.png) @@ -44,17 +44,17 @@ The steps below will assist you to upgrade the Syncfusion® version in the Syncf ![project migration](images/project-migration.png) - N> The versions are loaded from the Syncfusion ASP.NET MVC NuGet packages which published in [NuGet.org](https://www.nuget.org/packages?q=Tags%3A%22aspnetmvc%22syncfusion) and it requires internet connectivity. + N> The versions are loaded from the Syncfusion® ASP.NET MVC NuGet packages which published in [NuGet.org](https://www.nuget.org/packages?q=Tags%3A%22aspnetmvc%22syncfusion) and it requires internet connectivity. **Assets From:** Load the Syncfusion® Essential JS 2 assets to ASP.NET MVC Project, from either NuGet, CDN or Installed Location. - N> Installed location option will be available only when the Syncfusion® Essential JavaScript 2 setup has been installed. + N> The **Installed Location** option will be available only when the Syncfusion® Essential JavaScript 2 setup has been installed. 4. Check the **“Enable a backup before migrating”** checkbox if you want to take the project backup and choose location. 5. The Syncfusion® Reference Assemblies, Scripts, and CSS are updated to the selected version in the project. - if you enabled project backup before migrating, the old project was saved in the specified backup path location, as shown below once the migration process completed + If you enabled project backup before migrating, the old project was saved in the specified backup path location, as shown below once the migration process was completed. ![BackupLocation](images/BackupLocation.png) diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/Syncfusion-Notifications.md b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/Syncfusion-Notifications.md index ffd327b556..af3b966887 100644 --- a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/Syncfusion-Notifications.md +++ b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/Syncfusion-Notifications.md @@ -10,7 +10,7 @@ documentation: ug # Syncfusion® Notifications -Syncfusion® enhances the user experience in ASP.NET Core applications through notification messages. These notifications cover various aspects, including alerts for trial applications when utilizing Syncfusion® trial assemblies, updates regarding the availability of the latest Syncfusion® NuGet package, and notifications regarding newer releases of Essential Studio®. By keeping users informed, Syncfusion® ensures that developers stay updated with Syncfusion® latest features and enhancements. +Syncfusion® enhances the user experience in ASP.NET Core applications through notification messages. These notifications cover various aspects, including alerts for trial applications when utilizing Syncfusion® trial assemblies, updates regarding the availability of the latest Syncfusion® NuGet package, and notifications regarding newer releases of Essential Studio®. By keeping users informed, Syncfusion® ensures that developers stay updated with Syncfusion®'s latest features and enhancements. N> The Syncfusion® Notification feature is available from Essential Studio® v22.1.34. diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/convert-project.md b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/convert-project.md index 1e36d699e0..56d77feb5d 100644 --- a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/convert-project.md +++ b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/convert-project.md @@ -10,11 +10,11 @@ documentation: ug # Converting ASP.NET Core application to ASP.NET Core application -Syncfusion ASP.NET Core conversion is a Visual Studio add-in that converts an existing ASP.NET Core application into a Syncfusion ASP.NET Core (Essential JS 2) Web application by adding the required assemblies and resource files. +Syncfusion® ASP.NET Core conversion is a Visual Studio add-in that converts an existing ASP.NET Core application into a Syncfusion® ASP.NET Core (Essential JS 2) Web application by adding the required assemblies and resource files. -N> The Syncfusion ASP.NET Core (Essential JS 2) Web Application Project conversion utility is available from v16.3.0.17. Before using the Syncfusion ASP.NET Core Project Conversion, check whether the **ASP.NET Core Extensions - Syncfusion** is installed or not in Visual Studio Extension Manager by clicking on the **Extensions -> Manage Extensions -> Installed** for Visual Studio 2019 or later and for Visual Studio 2017 by clicking on the **Tools -> Extensions and Updates -> Installed**. If this extension is not installed, install the extension by following the steps from the [download and installation](download-and-installation) help topic. Also, check whether the corresponding Essential Studio® version build is installed or not. If the Essential Studio® version is not same for both the Extension and build, then the Project Conversion will not be shown. +N> The Syncfusion® ASP.NET Core (Essential JS 2) Web Application Project conversion utility is available from v16.3.0.17. Before using the Syncfusion® ASP.NET Core Project Conversion, check whether the **ASP.NET Core Extensions - Syncfusion®** is installed or not in Visual Studio Extension Manager by clicking on **Extensions -> Manage Extensions -> Installed** for Visual Studio 2019 or later and for Visual Studio 2017 by clicking on the **Tools -> Extensions and Updates -> Installed**. If this extension is not installed, install the extension by following the steps from the [download and installation](download-and-installation) help topic. Also, check whether the corresponding Essential Studio® version build is installed or not. If the Essential Studio® version is not same for both the Extension and the build, then the Project Conversion will not be shown. -The steps below help you to convert the ASP.NET Core application to the Syncfusion ASP.NET Core application via the Visual Studio: +The steps below help you to convert the ASP.NET Core application to the Syncfusion® ASP.NET Core application via the Visual Studio: 1. Open an existing Microsoft ASP.NET Core Web Application or create a new Microsoft ASP.NET Core Web Application. @@ -22,17 +22,17 @@ The steps below help you to convert the ASP.NET Core application to the Syncfusi **Option 1:** - Click **Extensions->Syncfusion Menu** and choose **Essential Studio® for ASP.NET Core > Convert to Syncfusion ASP.NET Core Application…** in **Visual Studio Menu**. + Click **Extensions->Syncfusion® Menu** and choose **Essential Studio® for ASP.NET Core > Convert to Syncfusion® ASP.NET Core Application…** in **Visual Studio Menu**. ![convert project](images/convert-new-app-2019.png) - N> In Visual Studio 2017, Click Syncfusion Menu and choose Essential Studio® for ASP.NET Core > Convert to Syncfusion® ASP.NET Core Application… in Visual Studio Menu.. + N> In Visual Studio 2017, Click Syncfusion® Menu and choose Essential Studio® for ASP.NET Core > Convert to Syncfusion® ASP.NET Core Application… in Visual Studio Menu.. ![convert project](images/convert-new-app.png) **Option 2:** - Right-click the **Project** from Solution Explorer, select **Syncfusion Web**, and choose the **Convert to Syncfusion ASP.NET Core Application…** + Right-click the **Project** from Solution Explorer, select **Syncfusion® Web**, and choose the **Convert to Syncfusion® ASP.NET Core Application…** ![convert to syncfusion](images/convert-to-syncfusion-ASpnet-core.png) @@ -44,7 +44,7 @@ The steps below help you to convert the ASP.NET Core application to the Syncfusi **Assets From:** Load the Syncfusion® Essential JS 2 assets to ASP.NET Core Project, from either NPM, CDN, or Installed Location. - N> Installed location option will be available only when the Syncfusion® Essential JavaScript 2 setup has been installed. + N> The **Installed Location** option will be available only when the Syncfusion® Essential JavaScript 2 setup has been installed. **Choose the Theme:** Choose the required theme. @@ -52,7 +52,7 @@ The steps below help you to convert the ASP.NET Core application to the Syncfusi 5. The required Syncfusion® NuGet packages with selected version, Scripts and CSS are added in the ASP.NET Core Web application. - If you enabled project backup before converting, the old project was saved in the specified backup path location, as shown below once the conversion process completed. + If you enabled project backup before converting, the old project was saved in the specified backup path location, as shown below once the conversion process was completed. ![BackupLocation](images/BackupLocation.png) diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/create-project.md b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/create-project.md index fe26be4aeb..62f5864046 100644 --- a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/create-project.md +++ b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/create-project.md @@ -12,37 +12,37 @@ documentation: ug ## Create project -Syncfusion® provides the **Visual Studio Project Templates** for the Syncfusion ASP.NET Core platform to create the Syncfusion ASP.NET Core Web Application using Essential JS 2 components. +Syncfusion® provides the **Visual Studio Project Templates** for the Syncfusion® ASP.NET Core platform to create the Syncfusion® ASP.NET Core Web Application using Essential JS 2 components. -N> The Syncfusion ASP.NET Core (Essential JS 2) project templates are available from v16.2.0.41. +N> The Syncfusion® ASP.NET Core (Essential JS 2) project templates are available from v16.2.0.41. -The following steps are used to create the **Syncfusion ASP.NET Core (Essential JS 2) Web Application** through the **Visual Studio Project Template**. +The following steps are used to create the **Syncfusion® ASP.NET Core (Essential JS 2) Web Application** through the **Visual Studio Project Template**. -N> Before using the Syncfusion ASP.NET Core Project Template, check whether the **ASP.NET Core Extensions - Syncfusion** is installed or not in Visual Studio Extension Manager by clicking on the **Extensions -> Manage Extensions -> Installed** for Visual Studio 2019 or later and for Visual Studio 2017 by clicking on the **Tools -> Extensions and Updates -> Installed**. If this extension is not installed, install the extension by following the steps from the [download and installation](download-and-installation) help topic. +N> Before using the Syncfusion® ASP.NET Core Project Template, check whether the **ASP.NET Core Extensions - Syncfusion®** is installed or not in Visual Studio Extension Manager by clicking on **Extensions -> Manage Extensions -> Installed** for Visual Studio 2019 or later and for Visual Studio 2017 by clicking on **Tools -> Extensions and Updates -> Installed**. If this extension is not installed, install the extension by following the steps from the [download and installation](download-and-installation) help topic. -1. To create the Syncfusion ASP.NET Core (Essential JS 2) project, follow either one of the options below: +1. To create the Syncfusion® ASP.NET Core (Essential JS 2) project, follow either one of the options below: **Option 1** - Click **Extensions->Syncfusion Menu** and choose **Essential Studio® for ASP.NET Core (EJ2) > Create New Syncfusion Project…** in **Visual Studio**. + Click **Extensions->Syncfusion® Menu** and choose **Essential Studio® for ASP.NET Core (EJ2) > Create New Syncfusion® Project…** in **Visual Studio**. ![new project](images/new-project.png) - N> In Visual Studio 2017, Click Syncfusion Menu and choose Essential Studio® for ASP.NET Core (EJ2) > Create New Syncfusion® Project… in Visual Studio. + N> In Visual Studio 2017, Click Syncfusion® Menu and choose Essential Studio® for ASP.NET Core (EJ2) > Create New Syncfusion® Project… in Visual Studio. ![new project](images/SyncfusionMenu.png) **Option 2** - Choose **File -> New -> Project**. Opens a new dialog to create a new project. By filtering the project type with Syncfusion or using the **Syncfusion** keyword in the search option, you can get the templates offered by Syncfusion for ASP.NET Core. + Choose **File -> New -> Project**. Opens a new dialog to create a new project. By filtering the project type with Syncfusion® or using the **Syncfusion®** keyword in the search option, you can get the templates offered by Syncfusion® for ASP.NET Core. ![syncfusion template](images/syncfusion-template.png) - Choose **File > New > Project** and navigate to **Syncfusion > .NET Core > Syncfusion ASP.NET Core Web Application** in **Visual Studio**. + Choose **File > New > Project** and navigate to **Syncfusion® > .NET Core > Syncfusion® ASP.NET Core Web Application** in **Visual Studio**. 2. Name the **Project**, choose the destination location, and then click **OK**. The Project Configuration Wizard appears. -3. Choose the options to configure the Syncfusion ASP.NET Core (Essential JS 2) Application in the following Project Configuration dialog. +3. Choose the options to configure the Syncfusion® ASP.NET Core (Essential JS 2) Application in the following Project Configuration dialog. ![project configuration](images/project-configuration.png) @@ -71,12 +71,12 @@ N> Before using the Syncfusion ASP.NET Core Project Template, check whether the | Project Type | .NET Core Version | Themes | Assets From | |---------------------|--------------------------|---------------|--------------------| - | ASP.NET Core Web App | .NET 8.0 and .NET 9.0| Material 3, Fluent 2, Fluent 2 High Contrast, Bootstrap 5, High Contrast, Tailwind CSS | CDN, NPM, Installed Location | - | ASP.NET Core Web App (Model-View-Controller) | .NET 8.0 and .NET 9.0 | Material 3, Fluent 2, Fluent 2 High Contrast, Bootstrap 5, High Contrast, Tailwind CSS | CDN, NPM, Installed Location | - | Angular | .NET 8.0, and .NET 9.0 | Material 3, Fluent 2, Fluent 2 High Contrast, Bootstrap 5, High Contrast, Tailwind CSS | CDN, NPM | - | React | .NET8.0, and .NET 9.0 | Material 3, Fluent 2, Fluent 2 High Contrast, Bootstrap 5, High Contrast, Tailwind CSS | CDN, NPM | + | ASP.NET Core Web App | .NET 8.0 and .NET 9.0| Fluent 2, Bootstrap 5, Tailwind CSS, Material 3, High Contrast, Fluent 2 High Contrast | CDN, NPM, Installed Location | + | ASP.NET Core Web App (Model-View-Controller) | .NET 8.0 and .NET 9.0 | Fluent 2, Bootstrap 5, Tailwind CSS, Material 3, High Contrast, Fluent 2 High Contrast | CDN, NPM, Installed Location | + | Angular | .NET 8.0, and .NET 9.0 | Fluent 2, Bootstrap 5, Tailwind CSS, Material 3, High Contrast, Fluent 2 High Contrast | CDN, NPM | + | React | .NET8.0, and .NET 9.0 | Fluent 2, Bootstrap 5, Tailwind CSS, Material 3, High Contrast, Fluent 2 High Contrast | CDN, NPM | - N> The Syncfusion ASP.NET Core (Essential JS 2) Project Template provides ASP.NET Core, Angular, and React project templates support from v17.1.0.47. + N> The Syncfusion® ASP.NET Core (Essential JS 2) Project Template provides ASP.NET Core, Angular, and React project templates support from v17.1.0.47. **.NET Core Version**: Select the version of ASP.NET Core Project. @@ -84,31 +84,31 @@ N> Before using the Syncfusion ASP.NET Core Project Template, check whether the **Assets From**: Load the Syncfusion® Essential JS 2 assets to ASP.NET Core Project, either NPM, CDN, or Installed Location. - N> Installed location option will be available only when the Syncfusion Essential JavaScript 2 setup has been installed. + N> The **Installed Location** option will be available only when the Syncfusion® Essential JavaScript 2 setup has been installed. **Theme Selection**: Themes will be listed out based on the selected project type and choose the required theme from the available list. ![theme selection](images/themes.png) - **Authentication Type**: Authentication will be listed out based on the selected project type and choose the required authentication from the available list. + **Authentication Type**: Authentication will be listed out based on the selected project type, and you can choose the required authentication from the available list. N> For **Angular** and **React** Project **None** and **Individual Authentication** only supported. ![authentication type](images/authentication.png) -4. Click Create, the Syncfusion ASP.NET Core (Essential JS 2) Application has been created. +4. Click Create, the Syncfusion® ASP.NET Core (Essential JS 2) Application has been created. ![css refernce](images/readme-file.PNG) -5. The created Syncfusion ASP.NET Core application configures with most recent Syncfusion® ASP.NET Core NuGet packages, selected style, scripts, and NPM packages for use Syncfusion® components. +5. The created Syncfusion® ASP.NET Core application is configured with the most recent Syncfusion® ASP.NET Core NuGet packages, selected styles, scripts, and NPM packages for use with Syncfusion® components. -6. Then, Syncfusion® licensing registration required message box will be shown, if you installed the trial setup or NuGet packages since Syncfusion® introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio® release. Navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/license-key#how-to-generate-syncfusion-license-key), which is shown in the licensing message box to generate and register the Syncfusion® license key to your project. Refer to this [blog](https://www.syncfusion.com/blogs/post/introducing-license-key-validation-for-the-essential-js-2-platforms.aspx) post for understanding the licensing changes introduced in Essential Studio®. +6. Then, Syncfusion® licensing registration required message box will be shown if you installed the trial setup or NuGet packages since Syncfusion® introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio® release. Navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/license-key#how-to-generate-syncfusion-license-key), which is shown in the licensing message box, to generate and register the Syncfusion® license key to your project. Refer to this [blog](https://www.syncfusion.com/blogs/post/introducing-license-key-validation-for-the-essential-js-2-platforms.aspx) post for understanding the licensing changes introduced in Essential Studio®. ![syncfusion license](images/syncfusion-license.png) ## Authentication Configuration -We need to register the created application in Azure Active Directory for **Microsoft Identity Platform**. From Azure Active Directory registration, we can get the tenant id and application client id for Microsoft Identity Platform. We need to configure these id values in created applications then only application will be run correctly with authentication support. +We need to register the created application in Azure Active Directory for **Microsoft Identity Platform**. From Azure Active Directory registration, we can get the tenant ID and application client ID for Microsoft Identity Platform. We need to configure these ID values in created applications; then only the application will be run correctly with authentication support. ### Microsoft Identity Platform Authentication diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/create-samples.md b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/create-samples.md index e455fefac4..4b1bbec6c5 100644 --- a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/create-samples.md +++ b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/create-samples.md @@ -10,7 +10,7 @@ documentation: ug # Create Sample in ASP.NET Core Application -The Syncfusion® Sample Creator is a tool that lets you to make Syncfusion® ASP.NET Core (Essential JS 2) projects with sample code for required Syncfusion® component features and Syncfusion® control configuration. +The Syncfusion® Sample Creator is a tool that lets you make Syncfusion® ASP.NET Core (Essential JS 2) projects with sample code for required Syncfusion® component features and Syncfusion® control configuration. N> The Syncfusion® ASP.NET Core Sample Creator utility is available from v16.3.0.17. @@ -20,11 +20,11 @@ The following steps is used to create the Syncfusion® ASP.NET Core Application **Option 1:** - Click **Extensions->Syncfusion Menu** and choose **Essential Studio® for ASP.NET Core (EJ2) > Launch Sample Creator…** in **Visual Studio.** + Click **Extensions->Syncfusion® Menu** and choose **Essential Studio® for ASP.NET Core (EJ2) > Launch Sample Creator…** in **Visual Studio.** ![sample creator](images/sample-creator_latest.png) - N> In Visual Studio 2017, Click Syncfusion Menu and choose Essential Studio® for ASP.NET Core > Launch Sample Creator… + N> In Visual Studio 2017, Click Syncfusion® Menu and choose Essential Studio® for ASP.NET Core > Launch Sample Creator… ![sample creator](images/sample-creator.png) @@ -68,16 +68,6 @@ The following steps is used to create the Syncfusion® ASP.NET Core Application > > > - > .NET 6.0 - > v19.4.0.38 - > Visual Studio 2022 - > - > - > .NET 7.0 - > v20.4.0.38 - > Visual Studio 2022 - > - > > .NET 8.0 > v23.2.4 > Visual Studio 2022 @@ -106,4 +96,4 @@ The following steps is used to create the Syncfusion® ASP.NET Core Application ![create](images/create-button.png) -3. The new Syncfusion® ASP.NET Core sample is created. Required controller and view file for selected controls, selected style, scripts and corresponding Syncfusion® NuGet packages are added in the created sample. \ No newline at end of file +3. The new Syncfusion® ASP.NET Core sample is created. Required controller and view files for selected controls, selected styles, scripts, and corresponding Syncfusion® NuGet packages are added in the created sample. \ No newline at end of file diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/download-and-installation.md b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/download-and-installation.md index 1e2b9f1c4f..bdf8f54cf7 100644 --- a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/download-and-installation.md +++ b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/download-and-installation.md @@ -10,7 +10,7 @@ documentation: ug # Download and Installation -Syncfusion® publishes the Visual Studio extension in the below Visual Studio marketplace link. You can either install it directly from Visual Studio or download and install it from the Visual Studio marketplace. +Syncfusion® publishes the Visual Studio extension at the Visual Studio Marketplace link provided below. You can either install it directly from Visual Studio or download and install it from the Visual Studio marketplace. [Visual Studio 2022](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.ASPNETCoreVSExtensions) @@ -18,7 +18,7 @@ Syncfusion® publishes the Visual Studio extension in the below Visual Studio ma ## Prerequisites -The following software prerequisites must be installed to install the Syncfusion ASP.NET Core extension, as well as for creating, adding snippet, converting, and upgrading Syncfusion ASP.NET Core applications. +The following software prerequisites must be installed to install the Syncfusion ASP.NET Core extension, as well as for creating, adding snippets, converting, and upgrading Syncfusion ASP.NET Core applications. * [Visual Studio 2017 or later](https://visualstudio.microsoft.com/downloads). diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/Aspnet-core-version.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/Aspnet-core-version.png index ac7a4a4001..42426f980f 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/Aspnet-core-version.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/Aspnet-core-version.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/convert-new-app-2019.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/convert-new-app-2019.png index 207a86ded3..d3d4daac0f 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/convert-new-app-2019.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/convert-new-app-2019.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/convert-to-syncfusion-ASpnet-core.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/convert-to-syncfusion-ASpnet-core.png index c3ab4eed31..bf07cd38b9 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/convert-to-syncfusion-ASpnet-core.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/convert-to-syncfusion-ASpnet-core.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/create-button.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/create-button.png index 4180c70216..0569e7f897 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/create-button.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/create-button.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/migrate-project-latest.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/migrate-project-latest.png index 78e5177767..a17635a730 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/migrate-project-latest.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/migrate-project-latest.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/migrate-syncfusion-EJ2.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/migrate-syncfusion-EJ2.png index 4a27dce242..57964c4897 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/migrate-syncfusion-EJ2.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/migrate-syncfusion-EJ2.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/syncfusion-template.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/syncfusion-template.png index 6108786ac1..d532797c12 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/syncfusion-template.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/syncfusion-template.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/theme-selection.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/theme-selection.png index 8749a158e9..82b873a94b 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/theme-selection.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/images/theme-selection.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/overview.md b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/overview.md index 3e866bb7c2..d2274f6005 100644 --- a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/overview.md +++ b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/overview.md @@ -14,7 +14,7 @@ documentation: ug The Syncfusion ASP.NET Core (Essential JS 2) Visual Studio Extensions can be accessed through the Syncfusion Menu to create and configure the project with Syncfusion® references in Visual Studio. -N> Syncfusion® Extension is published in Visual Studio Marketplace. Separate ASP.NET Core (Essential JS 2) Extension support is provided for Visual Studio 2022 and Visual Studio 2019 or lower. Refer to following Visual Marketplace link. +N> The Syncfusion® Extension is published in the Visual Studio Marketplace. Separate ASP.NET Core (Essential JS 2) Extension support is provided for Visual Studio 2022 and Visual Studio 2019 or lower. Refer to the following Visual Marketplace link. [Visual Studio 2022](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.ASPNETCoreVSExtensions) diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/scaffolding.md b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/scaffolding.md index 630ba647f0..292ebdb77e 100644 --- a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/scaffolding.md +++ b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/scaffolding.md @@ -10,7 +10,7 @@ documentation: ug # Scaffolding in ASP.NET Core Application -Syncfusion® provides **Visual Studio Scaffolding** for Syncfusion® ASP.NET Core platform to quickly add code that interacts with data models and reduce the amount of time to develop with data operation in your project. Scaffolding provides an easier way to create Views and Controller action methods for Syncfusion® ASP.NET Core DataGrid, Charts, Scheduler, Diagram, Tree Grid, Rich Text Editor, Document Editor, and PDF Viewer controls. +Syncfusion® provides **Visual Studio Scaffolding** for the Syncfusion® ASP.NET Core platform to quickly add code that interacts with data models and reduce the amount of time to develop data operations in your project. Scaffolding provides an easier way to create views and controller action methods for Syncfusion® ASP.NET Core DataGrid, Charts, Scheduler, Diagram, Tree Grid, Rich Text Editor, Document Editor, and PDF Viewer controls. N> Check that at least one Entity Framework model exists, and the application has been compiled once. If no Entity Framework model exists in your application, refer to this [documentation](https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/adding-model?view=aspnetcore-3.1) to generate the Entity Framework model. After the model file has been added, check that the required DBContext and properties have been added. Build the application before trying scaffolding. If any changes have been done in the model properties, rebuild the application once before performing scaffolding. @@ -54,7 +54,7 @@ N> Before using the Syncfusion® ASP.NET Core Scaffolding, check whether the **A ## Syncfusion ASP.NET Core Command-line Scaffolding -Syncfusion® provides **Scaffolding command-line** for Syncfusion® ASP.NET Core to quickly add code that interacts with data models and reduce the amount of time to develop with data operation in your project. Scaffolding provides an easier way to create view file and Controller action methods for Syncfusion® ASP.NET Core DataGrid, Charts, Scheduler, Diagram, Tree Grid, Rich Text Editor, Document Editor, and PDF Viewer controls. +Syncfusion® provides a **Scaffolding command line** for Syncfusion® ASP.NET Core to quickly add code that interacts with data models and reduce the amount of time to develop data operations in your project. Scaffolding provides an easier way to create view files and controller action methods for Syncfusion® ASP.NET Core DataGrid, Charts, Scheduler, Diagram, Tree Grid, Rich Text Editor, Document Editor, and PDF Viewer controls. N>Check that at least one Entity Framework model exists. If no Entity Framework model exists in your application, refer to this [documentation](https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/adding-model?view=aspnetcore-3.1) to generate the Entity Framework model. After the model file has been added, check that the required DBContext and properties are added. Now, build the application, and try scaffolding. If any changes are made in the model properties, rebuild the application once before performing scaffolding. diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/upgrade-project.md b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/upgrade-project.md index 7cae1aef1f..100baa2382 100644 --- a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/upgrade-project.md +++ b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/visual-studio-integration/upgrade-project.md @@ -10,7 +10,7 @@ documentation: ug # Upgrading Syncfusion® ASP.NET Core application to latest version -The Syncfusion® ASP.NET Core migration add-in for Visual Studio allows to migrate an existing Syncfusion® ASP.NET Core application from one version of Essential Studio® version to another version. This reduces the amount of manual work required when migrating the Syncfusion® version. +The Syncfusion® ASP.NET Core migration add-in for Visual Studio allows you to migrate an existing Syncfusion® ASP.NET Core application from one version of Essential Studio® to another version. This reduces the amount of manual work required when migrating the Syncfusion® version. ## IMPORTANT @@ -18,7 +18,7 @@ The Syncfusion® ASP.NET Core (Essential JS 2) Web Application Project Migration N> Before use, the Syncfusion® ASP.NET Core Project Migration, check whether the **ASP.NET Core Extensions - Syncfusion** installed or not in Visual Studio Extension Manager by clicking on the **Extensions -> Manage Extensions -> Installed** for Visual Studio 2019 or later and for Visual Studio 2017 by clicking on the **Tools -> Extensions and Updates -> Installed**. If this extension not installed, install the extension by follow the steps from the [download and installation](download-and-installation) help topic. Also, check whether the corresponding Essential Studio® version build installed or not. If the Essential Studio® version is not same for both the Extension and build, then the Project Migration will not be shown. -The steps below will assist you to upgrade the Syncfusion® version in the Syncfusion® ASP.NET Core application via Visual Studio: +The steps below will assist you in upgrading the Syncfusion® version in the Syncfusion® ASP.NET Core application via Visual Studio: 1. Open the Syncfusion® ASP.NET Core application that uses the Syncfusion® component. @@ -48,7 +48,7 @@ The steps below will assist you to upgrade the Syncfusion® version in the Syncf **Assets From:** Load the Syncfusion® Essential JS 2 assets to ASP.NET Core Project, from either NPM, CDN or Installed Location. - N> Installed location option will be available only when the Syncfusion® Essential JavaScript 2 setup has been installed. + N> The **Installed Location** option will be available only when the Syncfusion® Essential JavaScript 2 setup has been installed. 4. Check the **“Enable a backup before migrating”** checkbox, if you want to take the project backup and choose location. diff --git a/ej2-asp-core-mvc/Release-notes/30.1.37.md b/ej2-asp-core-mvc/Release-notes/30.1.37.md new file mode 100644 index 0000000000..c222d2bfdf --- /dev/null +++ b/ej2-asp-core-mvc/Release-notes/30.1.37.md @@ -0,0 +1,16 @@ +--- +title: Essential Studio for ##Platform_Name## 2025 Volume 2 Main Release Release Notes +description: Essential Studio for ##Platform_Name## 2025 Volume 2 Main Release Release Notes +platform: ej2-asp-core-mvc +documentation: ug +--- + +# Essential Studio for ##Platform_Name## Release Notes + +{% include release-info.html date="June 25,2025" version="v30.1.37" %} + +{% directory path: _includes/release-notes/v30.1.37 %} + +{% include {{file.url}} %} + +{% enddirectory %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/Release-notes/EJ2_ASP.MVC/30.1.37.md b/ej2-asp-core-mvc/Release-notes/EJ2_ASP.MVC/30.1.37.md new file mode 100644 index 0000000000..b3784b3e27 --- /dev/null +++ b/ej2-asp-core-mvc/Release-notes/EJ2_ASP.MVC/30.1.37.md @@ -0,0 +1,92 @@ +--- +title: Essential Studio for ##Platform_Name## 2025 Volume 2 Main Release Release Notes +description: Essential Studio for ##Platform_Name## 2025 Volume 2 Main Release Release Notes +platform: ej2-asp-core-mvc +documentation: ug +--- + + +# Essential Studio for ##Platform_Name## Release Notes + +{% include release-info.html date="June 25,2025" version="v30.1.37" passed="197739" failed="0" %} + +{% directory path: _includes/release-notes/v30.1.37 %} + +{% 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 | 106 | 106 | 0 | All Passed | +| AI Assist View | 431 | 431 | 0 | All Passed | +| AutoComplete | 200 | 200 | 0 | All Passed | +| Breadcrumb | 160 | 160 | 0 | All Passed | +| Bullet Chart | 165 | 165 | 0 | All Passed | +| Button | 145 | 145 | 0 | All Passed | +| ButtonGroup | 120 | 120 | 0 | All Passed | +| calendar | 177 | 177 | 0 | All Passed | +| Chart | 3898 | 3898 | 0 | All Passed | +| Chat UI | 184 | 184 | 0 | All Passed | +| CircularGauge | 429 | 429 | 0 | All Passed | +| ColorPicker | 130 | 130 | 0 | All Passed | +| Common | 685 | 685 | 0 | All Passed | +| Context Menu | 105 | 105 | 0 | All Passed | +| Data Grid | 2736 | 2736 | 0 | All Passed | +| Date Picker | 422 | 422 | 0 | All Passed | +| Date Range Picker | 419 | 419 | 0 | All Passed | +| Date Time Picker | 322 | 322 | 0 | All Passed | +| Diagram | 18619 | 18619 | 0 | All Passed | +| Document Editor | 3668 | 3668 | 0 | All Passed | +| DropDown Button | 132 | 132 | 0 | All Passed | +| Dropdown List | 191 | 191 | 0 | All Passed | +| Dropdown Tree | 105 | 105 | 0 | All Passed | +| File Manager | 2196 | 2196 | 0 | All Passed | +| Floating Action Button | 174 | 174 | 0 | All Passed | +| Gantt | 2992 | 2992 | 0 | All Passed | +| HeatMap Chart | 478 | 478 | 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 | +| Maps | 1290 | 1290 | 0 | All Passed | +| Menu | 187 | 187 | 0 | All Passed | +| Multicolumn Combo Box | 254 | 254 | 0 | All Passed | +| Multiselect Dropdown | 310 | 310 | 0 | All Passed | +| OTP Input | 240 | 240 | 0 | All Passed | +| PDF Viewer | 17966 | 17966 | 0 | All Passed | +| Pivot Table | 2714 | 2714 | 0 | All Passed | +| Progress Button | 132 | 132 | 0 | All Passed | +| Query Builder | 480 | 480 | 0 | All Passed | +| RangeNavigator | 138 | 138 | 0 | All Passed | +| Rating | 201 | 201 | 0 | All Passed | +| Ribbon | 487 | 487 | 0 | All Passed | +| Rich Text Editor | 4594 | 4594 | 0 | All Passed | +| schedule | 4578 | 4578 | 0 | All Passed | +| Signature | 105 | 105 | 0 | All Passed | +| Skeleton | 144 | 144 | 0 | All Passed | +| Slider | 147 | 147 | 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 | +| Spreadsheet | 10031 | 10031 | 0 | All Passed | +| Stepper | 138 | 138 | 0 | All Passed | +| Stock Chart | 379 | 379 | 0 | All Passed | +| Text Area | 107 | 107 | 0 | All Passed | +| Time Picker | 265 | 265 | 0 | All Passed | +| Timeline | 213 | 213 | 0 | All Passed | +| Toast | 154 | 154 | 0 | All Passed | +| Toolbar | 125 | 125 | 0 | All Passed | +| ToolTip | 147 | 147 | 0 | All Passed | +| TreeGrid | 3116 | 3116 | 0 | All Passed | +| Treemap | 264 | 264 | 0 | All Passed | +| Treeview | 344 | 344 | 0 | All Passed | +| DocIO | 16780 | 16780 | 0 | All Passed | +| PDF | 14032 | 14032 | 0 | All Passed | +| Presentation | 52029 | 52029 | 0 | All Passed | +| XlsIO | 21839 | 21839 | 0 | All Passed | \ No newline at end of file diff --git a/ej2-asp-core-mvc/Release-notes/EJ2_ASP.NETCORE/30.1.37.md b/ej2-asp-core-mvc/Release-notes/EJ2_ASP.NETCORE/30.1.37.md new file mode 100644 index 0000000000..406152e6ed --- /dev/null +++ b/ej2-asp-core-mvc/Release-notes/EJ2_ASP.NETCORE/30.1.37.md @@ -0,0 +1,92 @@ +--- +title: Essential Studio for ##Platform_Name## 2025 Volume 2 Main Release Release Notes +description: Essential Studio for ##Platform_Name## 2025 Volume 2 Main Release Release Notes +platform: ej2-asp-core-mvc +documentation: ug +--- + +# Essential Studio for ##Platform_Name## Release Notes + +{% include release-info.html date="June 25,2025" version="v30.1.37" passed="196608" failed="0" %} + +{% directory path: _includes/release-notes/v30.1.37 %} + +{% 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 | 106 | 106 | 0 | All Passed | +| AI Assist View | 431 | 431 | 0 | All Passed | +| AutoComplete | 200 | 200 | 0 | All Passed | +| Breadcrumb | 160 | 160 | 0 | All Passed | +| Bullet Chart | 165 | 165 | 0 | All Passed | +| Button | 145 | 145 | 0 | All Passed | +| ButtonGroup | 120 | 120 | 0 | All Passed | +| calendar | 177 | 177 | 0 | All Passed | +| Chart | 3898 | 3898 | 0 | All Passed | +| Chat UI | 184 | 184 | 0 | All Passed | +| CircularGauge | 429 | 429 | 0 | All Passed | +| ColorPicker | 130 | 130 | 0 | All Passed | +| Common | 685 | 685 | 0 | All Passed | +| Context Menu | 105 | 105 | 0 | All Passed | +| Data Grid | 2736 | 2736 | 0 | All Passed | +| Date Picker | 422 | 422 | 0 | All Passed | +| Date Range Picker | 419 | 419 | 0 | All Passed | +| Date Time Picker | 322 | 322 | 0 | All Passed | +| Diagram | 18619 | 18619 | 0 | All Passed | +| Document Editor | 3668 | 3668 | 0 | All Passed | +| DropDown Button | 132 | 132 | 0 | All Passed | +| Dropdown List | 191 | 191 | 0 | All Passed | +| Dropdown Tree | 105 | 105 | 0 | All Passed | +| File Manager | 2196 | 2196 | 0 | All Passed | +| Floating Action Button | 174 | 174 | 0 | All Passed | +| Gantt | 2992 | 2992 | 0 | All Passed | +| HeatMap Chart | 478 | 478 | 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 | +| Maps | 1290 | 1290 | 0 | All Passed | +| Menu | 187 | 187 | 0 | All Passed | +| Multicolumn Combo Box | 254 | 254 | 0 | All Passed | +| Multiselect Dropdown | 310 | 310 | 0 | All Passed | +| OTP Input | 240 | 240 | 0 | All Passed | +| PDF Viewer | 17966 | 17966 | 0 | All Passed | +| Pivot Table | 2714 | 2714 | 0 | All Passed | +| Progress Button | 132 | 132 | 0 | All Passed | +| Query Builder | 480 | 480 | 0 | All Passed | +| RangeNavigator | 138 | 138 | 0 | All Passed | +| Rating | 201 | 201 | 0 | All Passed | +| Ribbon | 487 | 487 | 0 | All Passed | +| Rich Text Editor | 4594 | 4594 | 0 | All Passed | +| schedule | 4578 | 4578 | 0 | All Passed | +| Signature | 105 | 105 | 0 | All Passed | +| Skeleton | 144 | 144 | 0 | All Passed | +| Slider | 147 | 147 | 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 | +| Spreadsheet | 10031 | 10031 | 0 | All Passed | +| Stepper | 138 | 138 | 0 | All Passed | +| Stock Chart | 379 | 379 | 0 | All Passed | +| Text Area | 107 | 107 | 0 | All Passed | +| Time Picker | 265 | 265 | 0 | All Passed | +| Timeline | 213 | 213 | 0 | All Passed | +| Toast | 154 | 154 | 0 | All Passed | +| Toolbar | 125 | 125 | 0 | All Passed | +| ToolTip | 147 | 147 | 0 | All Passed | +| TreeGrid | 3116 | 3116 | 0 | All Passed | +| Treemap | 264 | 264 | 0 | All Passed | +| Treeview | 344 | 344 | 0 | All Passed | +| DocIO | 16250 | 16250 | 0 | All Passed | +| Metafilerenderer | 1701 | 1701 | 0 | All Passed | +| PDF | 12431 | 12431 | 0 | All Passed | +| Presentation | 55865 | 55865 | 0 | All Passed | +| XlsIO | 17302 | 17302 | 0 | All Passed | \ No newline at end of file diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/events.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/events.md index afa35d6d52..24b07bfa0a 100644 --- a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/events.md +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/events.md @@ -50,3 +50,55 @@ The [PromptChanged](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2. {% include code-snippet/ai-assistview/events/promptChanged/promptChanged.cs %} {% endhighlight %} {% endtabs %} + +## beforeAttachmentUpload + +The [BeforeAttachmentUpload](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.InteractiveChat.AIAssistView.html#Syncfusion_EJ2_InteractiveChat_AIAssistView_BeforeAttachmentUpload) event is triggered before the attached files upload begins in the AI AssistView. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/events/before-attachment/razor %} +{% endhighlight %} +{% highlight c# tabtitle="before-attachment.cs" %} +{% include code-snippet/ai-assistview/events/before-attachment/before-attachment.cs %} +{% endhighlight %} +{% endtabs %} + +## attachmentUploadSuccess + +The [AttachmentUploadSuccess](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.InteractiveChat.AIAssistView.html#Syncfusion_EJ2_InteractiveChat_AIAssistView_AttachmentUploadSuccess) event is triggered when the attached file is successfully uploaded in the AI AssistView. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/events/attachment-success/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Attachment-success.cs" %} +{% include code-snippet/ai-assistview/events/attachment-success/attachment-success.cs %} +{% endhighlight %} +{% endtabs %} + +## attachmentUploadFailure + +The [AttachmentUploadFailure](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.InteractiveChat.AIAssistView.html#Syncfusion_EJ2_InteractiveChat_AIAssistView_AttachmentUploadFailure) event is triggered when the attached file upload fails in the AI AssistView. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/events/attachment-failure/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Attachment-failure.cs" %} +{% include code-snippet/ai-assistview/events/attachment-failure/attachment-failure.cs %} +{% endhighlight %} +{% endtabs %} + +## attachmentRemoved + +The [AttachmentRemoved](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.InteractiveChat.AIAssistView.html#Syncfusion_EJ2_InteractiveChat_AIAssistView_AttachmentRemoved) event is triggered when an attached file is removed in the AI AssistView. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/events/attachment-remove/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Attachment-remove.cs" %} +{% include code-snippet/ai-assistview/events/attachment-remove/attachment-remove.cs %} +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/file-attachments.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/file-attachments.md new file mode 100644 index 0000000000..167f12cd95 --- /dev/null +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/file-attachments.md @@ -0,0 +1,77 @@ +--- +layout: post +title: Attachments in ##Platform_Name## AI AssistView Control | Syncfusion +description: Checkout and learn about Attachments in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Attachments +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Attachments in ##Platform_Name## AI AssistView control + +The `Attachment` support in AI AssistView specifies user to include file attachments along with their prompts in the AI AssistView. This enhances the interaction by allowing users to provide additional context through files. You can enable this feature using the `EnableAttachments` property, and customize its behavior using the `AttachmentSettings` property. + +## Enable attachment + +You can enable the attachment by using the `EnableAttachments` property. By default, it is set to `false`. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/file-attachments/enable-attachments/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Enable-attachments.cs" %} +{% include code-snippet/ai-assistview/file-attachments/enable-attachments/enable-attachments.cs %} +{% endhighlight %} +{% endtabs %} + +![EnableAttachments](images/enable-attachments.png) + +## Configuring attachments + +You can use the `AttachmentSettings` tag to configure the attachments in the AI AssistView. + +### Setting saveUrl and removeUrl + +You can use the `SaveUrl` and `RemoveUrl` property to add the save and remove the URL for the file uploaded in the AI AssistView. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/file-attachments/save-remove-url/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Save-remove-url.cs" %} +{% include code-snippet/ai-assistview/file-attachments/save-remove-url/save-remove-url.cs %} +{% endhighlight %} +{% endtabs %} + +![SaveRemoveUrl](images/save-remove-url.png) + +### Setting file type + +You can use the `AllowedFileType` property to upload the specific file types in the attachment. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/file-attachments/file-type/razor %} +{% endhighlight %} +{% highlight c# tabtitle="File-type.cs" %} +{% include code-snippet/ai-assistview/file-attachments/file-type/file-type.cs %} +{% endhighlight %} +{% endtabs %} + +![FileType](images/file-type.png) + +### Setting file size + +You can use the  `MaxFileSize` property to allowed a maximum file size of the upload file in the AI AssistView. By default, it is set to `2000000` bytes. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/file-attachments/file-size/razor %} +{% endhighlight %} +{% highlight c# tabtitle="File-size.cs" %} +{% include code-snippet/ai-assistview/file-attachments/file-size/file-size.cs %} +{% endhighlight %} +{% endtabs %} + +![FileSize](images/file-size.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/events.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/events.md index 5082f40115..dc8f196767 100644 --- a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/events.md +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/events.md @@ -41,3 +41,43 @@ The [promptChanged](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2 {% include code-snippet/ai-assistview/events/promptChanged/tagHelper %} {% endhighlight %} {% endtabs %} + +## beforeAttachmentUpload + +The [BeforeAttachmentUpload](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.InteractiveChat.AIAssistView.html#Syncfusion_EJ2_InteractiveChat_AIAssistView_BeforeAttachmentUpload) event is triggered before the attached files upload begins in the AI AssistView. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/events/before-attachment/tagHelper %} +{% endhighlight %} +{% endtabs %} + +## attachmentUploadSuccess + +The [AttachmentUploadSuccess](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.InteractiveChat.AIAssistView.html#Syncfusion_EJ2_InteractiveChat_AIAssistView_AttachmentUploadSuccess) event is triggered when the attached file is successfully uploaded in the AI AssistView. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/events/attachment-success/tagHelper %} +{% endhighlight %} +{% endtabs %} + +## attachmentUploadFailure + +The [AttachmentUploadFailure](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.InteractiveChat.AIAssistView.html#Syncfusion_EJ2_InteractiveChat_AIAssistView_AttachmentUploadFailure) event is triggered when the attached file upload fails in the AI AssistView. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/events/attachment-failure/tagHelper %} +{% endhighlight %} +{% endtabs %} + +## attachmentRemoved + +The [AttachmentRemoved](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.InteractiveChat.AIAssistView.html#Syncfusion_EJ2_InteractiveChat_AIAssistView_AttachmentRemoved) event is triggered when an attached file is removed in the AI AssistView. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/events/attachment-remove/tagHelper %} +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/file-attachments.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/file-attachments.md new file mode 100644 index 0000000000..14898923ac --- /dev/null +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/file-attachments.md @@ -0,0 +1,77 @@ +--- +layout: post +title: Attachments in ##Platform_Name## AI AssistView Control | Syncfusion +description: Checkout and learn about Attachments in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Attachments +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Attachments in ##Platform_Name## AI AssistView control + +The `Attachment` support in AI AssistView specifies user to include file attachments along with their prompts in the AI AssistView. This enhances the interaction by allowing users to provide additional context through files. You can enable this feature using the `enableAttachments` property, and customize its behavior using the `e-aiassistview-attachmentsettings` tag helper. + +## Enable attachment + +You can enable the attachment by using the `enableAttachments` property. By default, it is set to `false`. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/file-attachments/enable-attachments/razor %} +{% endhighlight %} +{% highlight c# tabtitle="BannerTemplate.cs" %} +{% include code-snippet/ai-assistview/file-attachments/enable-attachments/enable-attachments.cs %} +{% endhighlight %} +{% endtabs %} + +![EnableAttachments](images/enable-attachments.png) + +## Configuring attachments + +You can use the `e-aiassistview-attachmentsettings` tag to configure the attachments in the AI AssistView. + +### Setting saveUrl and removeUrl + +You can use the `saveUrl` and `removeUrl` property to add the save and remove the URL for the file uploaded in the AI AssistView. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/file-attachments/save-remove-url/razor %} +{% endhighlight %} +{% highlight c# tabtitle="BannerTemplate.cs" %} +{% include code-snippet/ai-assistview/file-attachments/save-remove-url/save-remove-url.cs %} +{% endhighlight %} +{% endtabs %} + +![SaveRemoveUrl](images/save-remove-url.png) + +### Setting file type + +You can use the `allowedFileType` property to upload the specific file types in the attachment. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/file-attachments/file-type/razor %} +{% endhighlight %} +{% highlight c# tabtitle="BannerTemplate.cs" %} +{% include code-snippet/ai-assistview/file-attachments/file-type/file-type.cs %} +{% endhighlight %} +{% endtabs %} + +![FileType](images/file-type.png) + +### Setting file size + +You can use the  `maxFileSize` property to allowed a maximum file size of the upload file in the AI AssistView. By default, it is set to `2000000` bytes. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/file-attachments/file-size/razor %} +{% endhighlight %} +{% highlight c# tabtitle="BannerTemplate.cs" %} +{% include code-snippet/ai-assistview/file-attachments/file-size/file-size.cs %} +{% endhighlight %} +{% endtabs %} + +![FileSize](images/file-size.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/ai-assistview/images/enable-attachments.png b/ej2-asp-core-mvc/ai-assistview/images/enable-attachments.png new file mode 100644 index 0000000000..958fe07cca Binary files /dev/null and b/ej2-asp-core-mvc/ai-assistview/images/enable-attachments.png differ diff --git a/ej2-asp-core-mvc/ai-assistview/images/file-size.png b/ej2-asp-core-mvc/ai-assistview/images/file-size.png new file mode 100644 index 0000000000..ce618fbdf8 Binary files /dev/null and b/ej2-asp-core-mvc/ai-assistview/images/file-size.png differ diff --git a/ej2-asp-core-mvc/ai-assistview/images/file-type.png b/ej2-asp-core-mvc/ai-assistview/images/file-type.png new file mode 100644 index 0000000000..469532dc1c Binary files /dev/null and b/ej2-asp-core-mvc/ai-assistview/images/file-type.png differ diff --git a/ej2-asp-core-mvc/ai-assistview/images/save-remove-url.png b/ej2-asp-core-mvc/ai-assistview/images/save-remove-url.png new file mode 100644 index 0000000000..8a1b512f4a Binary files /dev/null and b/ej2-asp-core-mvc/ai-assistview/images/save-remove-url.png differ diff --git a/ej2-asp-core-mvc/auto-complete/filtering.md b/ej2-asp-core-mvc/auto-complete/filtering.md index 3a8a42429c..c3afafc560 100644 --- a/ej2-asp-core-mvc/auto-complete/filtering.md +++ b/ej2-asp-core-mvc/auto-complete/filtering.md @@ -150,6 +150,30 @@ An AutoComplete supports diacritics filtering which will ignore the [diacritics] {% endtabs %} {% endif %} +## Debounce delay + +You can use the [debounceDelay](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.dropdowns.autocomplete.html#Syncfusion_EJ2_DropDowns_AutoComplete_DebounceDelay) property for filtering, enabling you to set a delay in milliseconds. This functionality helps reduce the frequency of filtering as you type, enhancing performance and responsiveness for a smoother user experience.By default, a DebounceDelay of 300ms is set. If you wish to disable this feature entirely, you can set it to 0ms. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/autocomplete/filtering/arrayofstrings/tagHelper %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/autocomplete/filtering/arrayofstrings/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Arrayofstrings.cs" %} +{% include code-snippet/autocomplete/filtering/arrayofstrings/arrayofstrings.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + N> [View Sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-Core-UG-Examples/tree/main/AutoComplete/GroupingandFilreringSample). ## See also diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/appearance.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/appearance.md new file mode 100644 index 0000000000..448756ad69 --- /dev/null +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/appearance.md @@ -0,0 +1,77 @@ +--- +layout: post +title: Appearance in ##Platform_Name## Block Editor Control | Syncfusion +description: Checkout and learn about appearance with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +platform: ej2-asp-core-mvc +control: Block Editor +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Appearance in ##Platform_Name## Block Editor control + +The Block Editor control provides various appearance customization options to match your application's design requirements. These properties allow you to control the visual styling, layout, and overall look and feel of the editor. + +## Setting width and height + +You can specify the width and height for the Block Editor control using the `width` and `height` properties. + +```cshtml + +
+ @Html.EJS().BlockEditor("block-editor").Width("100%").Height("80vh").Render() +
+ +// Or with specific pixel values +
+ @Html.EJS().BlockEditor("block-editor").Width("800px").Height("500px").Render() +
+ +``` + +## Setting readonly mode + +You can utilize the `readonly` property to control whether the editor is in read-only mode. When set to `true`, users cannot edit the content but can still view it. + +```cshtml + +
+ @Html.EJS().BlockEditor("block-editor").ReadOnly(true).Render() +
+ +``` + +## Customization using CSS Class + +You can use the `cssClass` property to customize the appearance of the Block Editor control. + +```cshtml + +
+ @Html.EJS().BlockEditor("block-editor").CssClass("custom-editor-theme").Width("600px").Height("400px").Render() +
+ + + +``` diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/blocks.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/blocks.md new file mode 100644 index 0000000000..b6baedde14 --- /dev/null +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/blocks.md @@ -0,0 +1,274 @@ +--- +layout: post +title: Blocks in ##Platform_Name## Block Editor control | Syncfusion +description: Checkout and learn about Blocks with ##Platform_Name## Block Editor control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Block Editor +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Blocks in ##Platform_Name## Block Editor control + +The Block Editor control enables you to create block-based content editing solution using various types of blocks. The `blocks` property allows you to define and manage the content structure of your editor. + +## Blocks + +Blocks are the fundamental building elements of the Block Editor. Each block represents a distinct content unit such as a `paragraph`, `heading`, `list`, or specialized content like `code snippets` or `images`. The Block Editor organizes content as a collection of `blocks`, allowing for better structure and formatting options. + +You can configure blocks with various properties such as `Id`, `Type`, `Content`, `Children` and more to create rich, structured editor. + +## Block types + +The Block Editor supports multiple block types. Each block type offers different formatting and functionality options: + +| Built-in Block Types | Description | +|-----------------------------------------|---------------------------------------------------| +| Paragraph | Default block type for regular text content. | +| Heading1 to Heading4 | Different levels of headings for document structure.| +| CheckList | Interactive to-do lists with checkable items. | +| BulletList | Unordered lists with bullet points. | +| NumberedList | Ordered lists with sequential numbering. | +| Code | Formatted code blocks with syntax highlighting. | +| Quote | Styled block for quotations. | +| Callout | Highlighted block for important information. | +| Divider | Horizontal separator line. | +| ToggleParagraph and ToggleHeading1-4 | Collapsible content blocks. | +| Image | Block for displaying images. | +| Template | Predefined custom templates. | + +### Configure block type + +The Block Editor supports several block types through the `BlockType` enum. +You can configure the type of each block using the `Type` property. The block type determines the appearance and behavior of the content. By default, the block type is set to `Paragraph`. + +### Configure paragraph block + +You can render Paragraph blocks by setting the `Type` property as `Paragraph`. Paragraph blocks are the most common type, used for regular text content. They provide standard text formatting options and serve as the default block type. + +### Configure heading block + +You can render Heading blocks by setting the `Type` property as `Heading1`, `Heading2`, `Heading3`, or `Heading4`. Heading blocks (Heading1 to Heading4) are used to create document titles and section headers of varying importance. These blocks help structure your content hierarchically, making it easier to read and navigate. + +### Configure toggle blocks + +You can render Toggle blocks by setting the `Type` property as `ToggleParagraph` or `ToggleHeading1` to `ToggleHeading4`. Toggle blocks allow users to expand or collapse sections, providing a way to hide or show content as needed. + +### Configure list blocks + +You can render List blocks by setting the `Type` property as `BulletList`, `NumberedList`, or `Checklist`. Bullet lists and numbered lists are ideal for unordered and ordered items, respectively, while checklist blocks enable interactive to-do lists with checkable items. + +### Configure code block + +You can render Code blocks by setting the `Type` property as `Code`. By setting the `CodeSettings` property, you can configure the languages available for syntax highlighting and the default language. The default language is 'javascript'. + +> Refer to the [CodeSettings](#configure-code-settings) section for more details about the code settings. + +### Configure quote block + +You can render Quote blocks by setting the `Type` property as `Quote`. Quote blocks are specially styled for quotations or excerpts. + +### Configure callout block + +You can render Callout blocks by setting the `Type` property as `Callout`. They're useful for notes, warnings, or tips that require special attention. + +### Configure divider block + +Divider blocks insert horizontal lines that separate different sections of content. You can render Divider blocks by setting the `Type` property as `Divider`. + +### Configure image block + +You can render Image blocks by setting the `Type` property as `Image`. By setting the `ImageSettings` property, you can configure the image source, allowed file types, and display dimensions etc. + +> Refer to the [ImageSettings](#configure-image-settings) section for more details about the image settings. + +### Adding template + +You can render Template blocks by setting the `Type` property as `Template`. Template blocks enable you to use predefined content structures or custom templates. + +## Configure content + +Content in the Block Editor is managed through the `Content` property of blocks. + +Each content can have properties like `Id`, `Type`, `Content`, `Styles`, and more to customize the appearance and behavior of your text. + +### Setting content type + +You can specify the type of content using the `Type` property. The Block Editor supports several content types through the `ContentType` enum: + +| Built-in Content Type | Description | +|------------------------|-------------------------------------| +| Text | Represents plain text content. | +| Link | Represents a hyperlink. | +| Code | Represents a code snippet. | +| Mention | Represents a user mention. | +| Label | Represents a label or tag. | + +By default, the content type is set to `Text`. + +#### Configure text content + +You can configure Text content by setting the type property to `Text`. The default content type is `Text`. + +#### Configure hyperlink + +You can configure hyperlink content by setting the type property to `Link` and providing the link details through the `LinkSettings` property. + +The `LinkSettings` property allows you to specify the URL and whether the link should open in a new window. + +> Refer to the [LinkSettings](#configure-link-settings) section for more details about the link settings. + +#### Configure inline code + +You can configure inline code content by setting the type property to `Code`. Code content is used for inline code snippets within regular text. + +#### Configure mention + +Mentions are references to users or entities that can be inserted into your content. You can configure mention content by setting the type property to `Mention`. + +Mentions are typically triggered by the `@` character and are linked to the `Users` collection defined in the Block Editor. + +#### Configure Label + +You can configure label content by setting the type property to `Label`. + +By default, labels are triggered by the `$` character. You can customize the label settings using the `LabelSettings` property to define the label items and trigger character. + +> Refer to the [LabelSettings](#configuring-labelSettings) section for more details about the label settings. + +### Customize content + +The Block Editor allows you to customize the appearance of content using the `Styles` property. This property provides rich formatting options to style your text and content elements. + +The `Styles` property supports the following formatting options: + +| Style Property | Description | Default Value | +|---------------|-------------|---------------| +| bold | Makes the text bold | false | +| italic | Makes the text italicized | false | +| underline | Adds an underline to the text | false | +| strikethrough | Adds a line through the text | false | +| color | Sets the text color (HEX or RGBA format) | '' | +| bgColor | Sets the background color for the text | '' | +| superscript | Displays the text as superscript | false | +| subscript | Displays the text as subscript | false | +| uppercase | Converts the text to uppercase | false | +| lowercase | Converts the text to lowercase | false | +| custom | Adds custom CSS styles to the text | '' | + +You can apply one or more of these styles to any content element for rich text formatting: + +### Configure link settings +Link settings control the behavior and properties of hyperlinks in your content. You can configure link settings using the `LinkSettings` property. + +The `LinkSettings` property supports the following options: + +| Option | Description | Default Value | +|--------------|-----------------------------------------------------------------------------|---------------| +| url | Specifies the URL of the link. | '' | +| openInNewWindow | Specifies whether the link should open in a new window/tab. | false | + +## Configure indent + +You can specify the indentation level of a block using the `Indent` property. This property accepts a numeric value that determines how deeply a block is nested from the left margin. + +By default, the `Indent` property is set to `0`. + +## Configure checked state + +For blocks that support selection states such as `CheckList`, you can configure the checked state using the `IsChecked` property. + +By default, the `IsChecked` property is set to `false`. + +## Configure expanded state + +You can control whether a block is expanded or collapsed using the `IsExpanded` property. By default, this property is set to `false`, meaning the block will be collapsed initially. This setting is only applicable to Toggle blocks. + +## Configure CSS class + +You can apply custom styling to individual blocks using the `CssClass` property. This property accepts a string containing one or more CSS class names. + +Custom CSS classes allow you to define specialized styling for specific blocks in your editor. + +## Configure image settings + +For Image blocks, you can configure various aspects using the `ImageSettings` property. By using this property, you can set the image source, dimensions, save format, allowed file types, and more. + +The `ImageSettings` property supports the following options: + +| Property | Description | Default Value | +|----------|-------------|---------------| +| src | URL or data URI of the image | '' | +| saveFormat | Format to save the image ('base64' or 'blob') | 'base64' | +| allowedTypes | Array of allowed file extensions | ['.jpg', '.jpeg', '.png'] | +| width | Width of the image (px or %) | '' | +| height | Height of the image (px or %) | '' | +| minWidth | Minimum width for resizing (px or string) | 40 | +| maxWidth | Maximum width for resizing (px or string) | '' | +| minHeight | Minimum height for resizing (px or string) | 40 | +| maxHeight | Maximum height for resizing (px or string) | '' | +| altText | Alternative text for the image | '' | +| cssClass | CSS class(es) to apply to the image | '' | +| readOnly | Prevents modification of the image | false | + +These settings give you fine-grained control over how images appear and behave within your Block Editor. + +## Configure code settings + +For Code blocks, you can configure syntax highlighting and language options using the `CodeSettings` property. + +The `CodeSettings` property supports the following options: + +| Property | Description | Default Value | +|----------|-------------|---------------| +| languages | Array of language options for syntax highlighting | [] | +| defaultLanguage | The default language to use for syntax highlighting | 'javascript' | + +Each language object in the `languages` array should have: +- `language`: The language value used for syntax highlighting +- `label`: The display name shown in the language selector + +## Configuring label settings + +The `LabelSettings` property of the Block Editor provides options for configuring how labels work in your editor. It allows you to define the trigger character and available label items. + +### Trigger Character configuration + +You can use the `TriggerChar` property to specify the character that will trigger the label suggestions popup while typing. The default trigger character is `$`. + +### Label items configuration + +The `LabelItems` array allows you to define the available labels in your editor. Each label item can have the following properties: + +| Property | Description | +|-------------|---------------------------------------------| +| `id` | Unique identifier for the label | +| `text` | Display text for the label | +| `groupHeader` | Category/group name for organizing labels | +| `labelColor` | Background color of the label | +| `iconCss` | CSS class for an icon to display with label | + + +When users type the trigger character followed by text, a popup will appear showing matching label items from which they can select. The selected label will be inserted into the content as a Label content item. + +#### Using labels with group headers + +Labels with the same `GroupHeader` value will be grouped together in the label selection popup: + +## Configure template + +The Block Editor allows you to use custom templates for specialized content using the `Template` property. Templates can be defined as strings, functions, or HTML elements. + +## Configure placeholder + +You can configure placeholder text for block using the `Placeholder` property. This text appears when the block is empty. The default placeholder for the paragraph block is `Write something or ‘/’ for commands.`. + +## Configure children + +The Block Editor supports hierarchical content structures through the `Children` property. This property allows you to create nested blocks, which is applicable only for Callout and Toggle blocks. + +Child blocks can be configured with all the same properties as top-level blocks. + +### Configure parent id + +For proper hierarchy, you should ensure that the `ParentId` of each child block matches the `Id` of its parent block. This structure helps maintain the nested relationships within the editor. diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/drag-drop.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/drag-drop.md new file mode 100644 index 0000000000..08b3844152 --- /dev/null +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/drag-drop.md @@ -0,0 +1,29 @@ +--- +layout: post +title: Drag and drop in ##Platform_Name## Block Editor Control | Syncfusion +description: Checkout and learn about Drag and drop with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +platform: ej2-asp-core-mvc +control: Block Editor +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Drag and drop in ##Platform_Name## Block Editor control + +The drag and drop feature in Block Editor allows users to easily rearrange blocks within the editor by dragging them to different positions. + +## Enable Drag and Drop + +You can control drag and drop operations within Block Editor using the `enableDragAndDrop` property. By default, it is set to `true`. + +## Dragging blocks + +When drag and drop is enabled, users can rearrange blocks in the following ways: + +The Block Editor supports both single and multiple block dragging. Users can drag individual blocks or select multiple blocks and drag them together to a new position. + +- **Single Block Dragging**: For single block, users can hover over a block to reveal the drag handle, then click and drag to move it to a new position. + +- **Multiple Block Dragging**: For multiple blocks, users first select the blocks they want to move. Once selected, users can drag the entire group to a new position. + +During the drag operation, the editor provides visual cues to indicate where the blocks will be positioned when dropped. This helps users precisely place blocks where they want it. \ No newline at end of file diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/editor-menus.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/editor-menus.md new file mode 100644 index 0000000000..fc55bce490 --- /dev/null +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/editor-menus.md @@ -0,0 +1,156 @@ +--- +layout: post +title: Editor Menus in ##Platform_Name## Block Editor Control | Syncfusion +description: Checkout and learn about Editor Menus with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +platform: ej2-asp-core-mvc +control: Block Editor +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Editor Menus in ##Platform_Name## Block Editor control + +The Block Editor control provides several interactive menus to enhance content creation and editing. These menus offer quick access to various commands and formatting options. + +## Slash command menu + +The Slash Command menu allows users to quickly insert or transform blocks by typing `/` followed by a command. This provides an efficient, keyboard-driven way to interact with the editor. + +### Built-in items + +The Slash Command menu comes with a set of pre-defined commands for all block types: + +- **Headings(Level 1 to 4)**: to insert respective heading blocks. +- **Lists(Bullet, Numbered, Checklist)**: for different list types. +- **Paragraph**: for standard text blocks. +- **Image**: for media insertion. +- **Toggle**: for collapsible content. +- **Callout**: for highlighting important information. +- **Utility(Divider, Quote, Code)**: for other utility blocks. + +### Customize Slash command menu + +You can utilize the `commandMenu` property on the Block Editor control to customize the Slash Command menu to include your own custom commands and other modifications. + +Below example demonstrates how to customize the Slash Command menu. + +#### Show or hide tooltip + +By default, the tooltip is displayed when the user hovers over the command item. You can show or hide the tooltip using the `enableTooltip` property on the command menu settings. + +### Events + +The following events are available in the Slash Command menu. + +|Name|Args|Description| +|---|---|---| +|`open`|CommandMenuOpenEventArgs|Triggers when the command menu is opened.| +|`close`|CommandMenuCloseEventArgs|Triggers when the command menu is closed.| +|`queryFiltering`|CommandQueryFilteringEventArgs|Triggers when the user types to filter the command menu items.| +|`itemClicked`|CommandItemClickedEventArgs|Triggers when the user clicks on a command menu item.| + +Below example demonstrates how to configure the events in the Slash Command menu. + +## Context menu + +The Context menu appears when a user right-clicks within a specific block. It provides context-aware actions relevant to the clicked block or content. + +### Built-in items + +The Context menu offers different built-in options: + +- **Undo/Redo**: Undo and redo actions. +- **Cut/Copy/Paste**: Standard clipboard actions. +- **Indent**: Increase or decrease the indent level of the selected block. +- **Link**: Add or edit a hyperlink. + +### Customize Context menu + +You can utilize the `contextMenu` property on the blockeditor to customize the Context menu to add specific actions or modify existing ones based on the application needs. + +Below example demonstrates how to customize the Context menu. + +### Events + +The following events are available in the Context menu. + +|Name|Args|Description| +|---|---|---| +|`beforeOpen`|ContextMenuBeforeOpenEventArgs|Triggers before the context menu opens.| +|`open`|ContextMenuOpenEventArgs|Triggers when the context menu is opened.| +|`beforeClose`|ContextMenuBeforeCloseEventArgs|Triggers before the context menu closes.| +|`close`|ContextMenuCloseEventArgs|Triggers when the context menu is closed.| +|`itemClick`|ContextMenuItemClickEventArgs|Triggers when a context menu item is clicked.| + +Below example demonstrates how to configure the events in the Context menu. + +## Block action menu + +The Block Action menu typically appears next to a block when you hover over it and click on the drag handle icon, offering quick actions specific to that block. + +### Built-in items + +The Block Action menu provides convenient actions for managing individual blocks: + +- **Duplicate**: Create a copy of the current block. +- **Delete**: Remove the block from the editor. +- **Move Up**: Move the block one level up in the hierarchy. +- **Move Down**: Move the block one level down in the hierarchy. + +### Customize Block action menu + +You can utilize the `Block actionsMenu` property on the block editor to customize the Block action menu to include block-specific commands relevant to your application. This allows for highly tailored user experiences. + +Below example demonstrates how to customize the Block action menu. + +#### Show or hide tooltip + +By default, the tooltip is displayed when the user hovers over the action item. You can show or hide the tooltip using the `enableTooltip` property on the block action menu settings. + +### Events + +The following events are available in the Block action menu. + +|Name|Args|Description| +|---|---|---| +|`open`|Block actionMenuOpenEventArgs|Triggers when the block action menu is opened.| +|`close`|Block actionMenuCloseEventArgs|Triggers when the block action menu is closed.| +|`itemClick`|Block actionMenuItemClickEventArgs|Triggers when a block action menu item is clicked.| + +Below example demonstrates how to configure the events in the Block action menu. + +## Inline Toolbar + +The Inline Toolbar appears when a text is selected in the editor, providing quick access to common text formatting actions that apply to the inline content. + +### Built-in items + +The Inline Toolbar includes below built-in formatting options: + +- **Text Styles**: Bold, Italic, Underline, Strikethrough. +- **Superscript/Subscript**: For mathematical or scientific notations. +- **Case Conversion**: Uppercase, Lowercase. +- **Text Color**: Change text color. +- **Background Color**: Change background color. + +### Customize Inline Toolbar + +You can utilize the `inlineToolbar` property on the blockeditor to customize the Inline Toolbar to add or remove formatting options based on your application's needs. + +Below example demonstrates how to customize the Inline Toolbar. + +#### Show or hide tooltip + +By default, the tooltip is displayed when the user hovers over the toolbar item. You can show or hide the tooltip using the `enableTooltip` property on the inline toolbar settings. + +### Events + +The following events are available in the Inline Toolbar. + +|Name|Args|Description| +|---|---|---| +|`open`|ToolbarOpenEventArgs|Triggers when the inline toolbar is opened.| +|`close`|ToolbarCloseEventArgs|Triggers when the inline toolbar is closed.| +|`itemClicked`|ToolbarItemClickedEventArgs|Triggers when the user clicks on an inline toolbar item.| + +Below example demonstrates how to configure the events in the Inline Toolbar. \ No newline at end of file diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/events.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/events.md new file mode 100644 index 0000000000..d5c4ab3538 --- /dev/null +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/events.md @@ -0,0 +1,73 @@ +--- +layout: post +title: Events in ##Platform_Name## Block Editor Control | Syncfusion +description: Checkout and learn about Events with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +platform: ej2-asp-core-mvc +control: Block Editor +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Events in ##Platform_Name## Block Editor control + +The Block Editor control provides a comprehensive set of events that allow you to monitor and respond to various user interactions and editor state changes. These events enable you to implement custom behaviors, validation, logging, and integration with other systems. + +## Created + +The `created` event is triggered when the Block Editor control is successfully initialized and ready for use. This event is useful for performing setup operations or initializing additional features after the editor is created. + +## ContentChanged + +The `contentChanged` event is triggered whenever the content within the editor is modified. This includes content additions, deletions, or any structural modifications to the document. + +## SelectionChanged + +The `selectionChanged` event is triggered when the user's text selection changes within the editor. This can be useful for updating UI elements based on the current selection. + +## UndoRedoPerformed + +The `undoRedoPerformed` event is triggered when an undo or redo operation is executed. This event provides information about the action performed and the state before and after the operation. + +## BlockAdded + +The `blockAdded` event is triggered when a new block is added to the editor. This includes blocks added through user interaction, paste operations, or programmatic insertion. + +## BlockRemoved + +The `blockRemoved` event is triggered when a block is removed from the editor. This can occur through user deletion, cut operations, or programmatic removal. + +## BlockMoved + +The `blockMoved` event is triggered when blocks are moved from one position to another within the editor. This includes drag-and-drop operations, through keyboard shortcuts or programmatic block reordering. + +## BlockDragStart + +The `blockDragStart` event is triggered at the beginning of a block drag operation, providing information about the blocks being dragged and their initial position. + +## BlockDrag + +The `blockDrag` event is triggered during a drag operation, providing information about the blocks being dragged and their current position. + +## BlockDrop + +The `blockDrop` event is triggered when blocks are successfully dropped at their destination during a drag-and-drop operation. + +## Focus + +The `focus` event is triggered when the editor gains focus. This is useful for updating UI states and managing editor interactions. + +## Blur + +The `blur` event is triggered when the editor loses focus. This is commonly used for auto-saving content or hiding UI elements. + +## KeyActionExecuted + +The `keyActionExecuted` event is triggered when a keyboard shortcut is executed. This provides information about the key combination used and the corresponding action performed. + +## BeforePaste + +The `beforePaste` event is triggered before content is pasted into the editor. This event allows you to modify or cancel the paste operation. + +## AfterPaste + +The `afterPaste` event is triggered after content has been successfully pasted into the editor. This is useful for post-processing pasted content or updating related UI elements. diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/getting-started.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/getting-started.md new file mode 100644 index 0000000000..db785a86e0 --- /dev/null +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/getting-started.md @@ -0,0 +1,101 @@ +--- +layout: post +title: Getting Started with ##Platform_Name## BlockEditor Control | Syncfusion +description: Checkout and learn about getting started with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more. +platform: ej2-asp-core-mvc +control: BlockEditor +publishingplatform: ##Platform_Name## +documentation: ug +--- + + +# Getting Started with ASP.NET MVC BlockEditor control + +This section briefly explains about how to include `ASP.NET MVC BlockEditor` control in your ASP.NET MVC application using Visual Studio. + +## Prerequisites + +[System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) + +## Create ASP.NET MVC application with HTML helper + +* [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) + +## Install ASP.NET MVC package in the application + +To add `ASP.NET MVC` controls in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) and then install it. + +{% tabs %} +{% highlight C# tabtitle="Package Manager" %} + +Install-Package Syncfusion.EJ2.MVC5 -Version {{ site.ej2version }} + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® ASP.NET MVC controls are available in [nuget.org.](https://www.nuget.org/packages?q=syncfusion.EJ2) Refer to [NuGet packages topic](https://ej2.syncfusion.com/aspnetmvc/documentation/nuget-packages) to learn more about installing NuGet packages in various OS environments. The Syncfusion.EJ2.MVC5 NuGet package has dependencies, [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json/) for JSON serialization and [Syncfusion.Licensing](https://www.nuget.org/packages/Syncfusion.Licensing/) for validating Syncfusion® license key. + +## Add namespace + +Add **Syncfusion.EJ2** namespace reference in `Web.config` under `Views` folder. + +``` + + + +``` + +## Add stylesheet and script resources + +Here, the theme and script is referred using CDN inside the `` of `~/Pages/Shared/_Layout.cshtml` file as follows, + +{% tabs %} +{% highlight cshtml tabtitle="~/_Layout.cshtml" %} + + + ... + + + + + + +{% endhighlight %} +{% endtabs %} + +N> Checkout the [Themes topic](https://ej2.syncfusion.com/aspnetmvc/documentation/appearance/theme) to learn different ways (CDN, NPM package, and [CRG](https://ej2.syncfusion.com/aspnetmvc/documentation/common/custom-resource-generator)) to refer styles in ASP.NET MVC application, and to have the expected appearance for Syncfusion® ASP.NET MVC controls. Checkout the [Adding Script Reference](https://ej2.syncfusion.com/aspnetmvc/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your ASP.NET MVC application. + +## Register Syncfusion® script manager + +Also, register the script manager `EJS().ScriptManager()` at the end of `` in the `~/Pages/Shared/_Layout.cshtml` file as follows. + +{% tabs %} +{% highlight cshtml tabtitle="~/_Layout.cshtml" %} + + +... + + @Html.EJS().ScriptManager() + + +{% endhighlight %} +{% endtabs %} + +## Add ASP.NET MVC BlockEditor control + +Now, add the Syncfusion® ASP.NET MVC BlockEditor control in `~/Views/Home/Index.cshtml` page. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/block-editor/getting-started/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Default.cs" %} +{% include code-snippet/block-editor/getting-started/gettingstarted.cs %} +{% endhighlight %} +{% endtabs %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET MVC BlockEditor control will be rendered in the default web browser. + +![ASP.NET MVC BlockEditor Control](images/block-editor-control.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/globalization.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/globalization.md new file mode 100644 index 0000000000..8310a3df65 --- /dev/null +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/globalization.md @@ -0,0 +1,53 @@ +--- +layout: post +title: Globalization in ##Platform_Name## Block Editor Control | Syncfusion +description: Checkout and learn about Globalization with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +platform: ej2-asp-core-mvc +control: Block Editor +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Globalization in ##Platform_Name## Block Editor control + +## Localization + +The Block Editor can be localized to any culture by defining the text of the Block Editor in the corresponding culture. The default locale of the Block Editor is `en` (English). The following table represents the default text of the Block Editor in `en` culture. + +|KEY|Text| +|----|----| +|`paragraph`|Write something or '/' for commands.| +|`heading1`|Heading 1| +|`heading2`|Heading 2| +|`heading3`|Heading 3| +|`heading4`|Heading 4| +|`toggleParagraph`|Toggle Paragraph| +|`toggleHeading1`|Toggle Heading 1| +|`toggleHeading2`|Toggle Heading 2| +|`toggleHeading3`|Toggle Heading 3| +|`toggleHeading4`|Toggle Heading 4| +|`bulletList`|Add item| +|`numberedList`|Add item| +|`checkList`|Todo| +|`callout`|Write a callout| +|`addIconTooltip`|Click to insert below| +|`dragIconTooltipActionMenu`|Click to open| +|`dragIconTooltip`|(Hold to drag)| +|`insertLink`|Insert Link| +|`linkText`|Text| +|`linkTextPlaceholder`|Link text| +|`linkUrl`|URL| +|`linkUrlPlaceholder`|https://example.com| +|`linkTitle`|Title| +|`linkTitlePlaceholder`|Link title| +|`linkOpenInNewWindow`|Open in new window| +|`linkInsert`|Insert| +|`linkRemove`|Remove| +|`linkCancel`|Cancel| +|`codeCopyTooltip`|Copy code| + +The below example shows adding the German culture locale(`de-DE`) + +## RTL + +RTL provides an option to switch the text direction and layout of the Block Editor control from right to left by setting the `enableRtl` property to `true`. \ No newline at end of file diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/keyboard-shortcuts.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/keyboard-shortcuts.md new file mode 100644 index 0000000000..e0686226fa --- /dev/null +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/keyboard-shortcuts.md @@ -0,0 +1,80 @@ +--- +layout: post +title: Keyboard Shortcuts in ##Platform_Name## Block Editor Control | Syncfusion +description: Checkout and learn about Keyboard Shortcuts with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +platform: ej2-asp-core-mvc +control: Block Editor +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Keyboard Shortcuts in ##Platform_Name## Block Editor control + +The Block Editor control provides comprehensive keyboard shortcuts to enhance productivity and streamline content creation. These shortcuts are organized into different categories based on their functionality, allowing users to quickly access various features without relying on mouse interactions. + +## Content editing and formatting + +These keyboard shortcuts allow for quick access to content editing features like bold, italic, and text formatting options. + +| Actions | Windows | Mac | +|---------|---------|-----| +| Bold | Ctrl + B | ⌘ + B | +| Italic | Ctrl + I | ⌘ + I | +| Underline | Ctrl + U | ⌘ + U | +| Strikethrough | Ctrl + Shift + X | ⌘ + ⇧ + X | +| Insert Link | Ctrl + K | ⌘ + K | + +## Block creation and management + +These shortcuts enable quick creation of different block types and management of existing blocks. + +| Actions | Windows | Mac | +|---------|---------|-----| +| Create Paragraph | Ctrl + Alt + P | ⌘ + ⌥ + P | +| Create CheckList | Ctrl + Shift + 7 | ⌘ + ⇧ + 7 | +| Create Bullet List | Ctrl + Shift + 8 | ⌘ + ⇧ + 8 | +| Create Numbered List | Ctrl + Shift + 9 | ⌘ + ⇧ + 9 | +| Create Heading 1 | Ctrl + Alt + 1 | ⌘ + ⌥ + 1 | +| Create Heading 2 | Ctrl + Alt + 2 | ⌘ + ⌥ + 2 | +| Create Heading 3 | Ctrl + Alt + 3 | ⌘ + ⌥ + 3 | +| Create Heading 4 | Ctrl + Alt + 4 | ⌘ + ⌥ + 4 | +| Create Quote | Ctrl + Alt + Q | ⌘ + ⌥ + Q | +| Create Code Block | Ctrl + Alt + K | ⌘ + ⌥ + K | +| Create Callout | Ctrl + Alt + C | ⌘ + ⌥ + C | +| Insert Image | Ctrl + Alt + / | ⌘ + ⌥ + / | +| Insert Divider | Ctrl + Shift + - |⌘ + ⇧ + - | + +## Block level actions + +These shortcuts provide quick access to block-specific actions like duplication, deletion, indentation and movement. +[For indent, both ctrl+] and tab are supported. For outdent, both ctrl+[ and shift+tab are supported.] + +| Actions | Windows | Mac | +|---------|---------|-----| +| Duplicate Block | Ctrl + D | ⌘ + D | +| Delete Block | Ctrl + Shift + D | ⌘ + ⇧ + D | +| Move Block Up | Ctrl + Shift + ↑ | ⌘ + ⇧ + ↑ | +| Move Block Down | Ctrl + Shift + ↓ | ⌘ + ⇧ + ↓ | +| Increase Indent | Ctrl + ] or Tab | ⌘ + ] or Tab | +| Decrease Indent | Ctrl + [ or Shift + Tab | ⌘ + [ or ⇧ + Tab | + +## General editor operations + +These shortcuts cover general editor functionality including undo/redo operations and clipboard actions. + +| Actions | Windows | Mac | +|---------|---------|-----| +| Undo | Ctrl + Z | ⌘ + Z | +| Redo | Ctrl + Y | ⌘ + Y | +| Cut | Ctrl + X | ⌘ + X | +| Copy | Ctrl + C | ⌘ + C | +| Paste | Ctrl + V | ⌘ + V | +| Print | Ctrl + P | ⌘ + P | + +## Customizing keyboard shortcuts + +You can customize menu level shortcuts such as `Slash Command Menu`, `Block Action Menu` and `Context Menu` on the respective menu settings config by modifying it's `shortcut` property. + +For other operations, you can customize the keyboard shortcuts by configuring the `keyConfig` property when initializing the Block Editor control. This allows you to override default shortcuts or add new ones according to your application's requirements. + +In the below example, the shortcut for bold formatting is changed to Alt + B and for italic formatting to Alt + I. diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/methods.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/methods.md new file mode 100644 index 0000000000..bce8370773 --- /dev/null +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/methods.md @@ -0,0 +1,109 @@ +--- +layout: post +title: Methods in ##Platform_Name## Block Editor Control | Syncfusion +description: Checkout and learn about Methods with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +platform: ej2-asp-core-mvc +control: Block Editor +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Methods in ##Platform_Name## Block Editor control + +The Block Editor control provides a comprehensive set of public methods that allow you to programmatically interact with and manipulate the editor content. These methods enable you to add, remove, update, and manage blocks, as well as control selection, formatting, and other editor operations. + +## Block Management Methods + +### Adding a block + +You can add a new block to the editor at a specified position using the `addBlock` method. You can also insert the block before or after a target block. + +### Removing a block + +You can remove a block from the editor using the `removeBlock` method. + +### Getting a block + +You can retrieve a block model by its unique identifier using the `getBlock` method. Returns `null` if the block is not found. + +### Moving a block + +You can move a block from one position to another within the editor using the `moveBlock` method. + +### Updating a block + +You can update the properties of an existing block using the `updateBlock` method. Only the specified properties are modified while others remain unchanged. Returns `true` if the update was successful, `false` otherwise. + +## Selection and Cursor Methods + +### Setting text selection + +You can set the text selection within a specific content element using start and end positions with the `setSelection` method. + +### Setting cursor position + +You can place the cursor at a specific position within a block using the `setCursorPosition` method. + +### Getting selected blocks + +You can retrieve the currently selected blocks in the editor using the `getSelectedBlocks` method. Returns `null` if no blocks are selected. + +### Getting selection range + +You can get the current selection range in the editor using the `getRange` method. This method returns a `Range` object representing the selected text. Returns `null` if no selection is active. + +### Setting selection range + +You can set the selection range in the editor using the `selectRange` method. This method accepts a `Range` object that defines the start and end positions of the selection within the editor. + +### Selecting a block + +You can select a specific block in the editor using the `selectBlock` method. + +### Selecting all blocks + +You can select all blocks in the editor using the `selectAllBlocks` method. + +## Focus Management Methods + +### FocusIn + +You can utilize the `focusIn` method to give focus to the editor. This method ensures that the editor is ready for user input. + +### FocusOut + +You can remove focus from the editor using the focusOut method. This method clears any active selections and makes the editor inactive for user input. + +## Formatting Methods + +### Executing toolbar action + +You can execute a built-in toolbar formatting command using the `executeToolbarAction` method. This method is used to apply formatting such as bold, italic, or color to the selected text. + +### Enabling toolbar items + +You can enable specific toolbar items in the inline toolbar using the `enableToolbarItems` method. This method accepts a single item or an array of items to be enabled. + +### Disabling toolbar items + +You can disable specific toolbar items in the inline toolbar using the `disableToolbarItems` method. This method accepts a single item or an array of items to be disabled. + +## Data Export Methods + +### Getting data as JSON + +You can export the editor content in JSON format using the `getDataAsJson` method. This method allows you to export all blocks or a specific block. + +### Getting data as HTML + +You can export the editor content in HTML format using the `getDataAsHtml` method. This method allows you to export all blocks or a specific block. + +## Utility Methods + +### Getting block count + +You can utilize the `getBlockCount` method to retrieve the total number of blocks in the editor. + +### Printing editor content + +You can print the editor content using the `print` method. This method opens a print dialog with the current editor content formatted for printing. diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/paste-cleanup.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/paste-cleanup.md new file mode 100644 index 0000000000..6ca31f46a6 --- /dev/null +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/paste-cleanup.md @@ -0,0 +1,50 @@ +--- +layout: post +title: Undo redo in ##Platform_Name## Block Editor Control | Syncfusion +description: Checkout and learn about undo redo with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +platform: ej2-asp-core-mvc +control: Block Editor +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Paste Clean-up in ##Platform_Name## Block Editor control + +The Block Editor control provides robust paste clean-up functionalities to ensure that pasted content integrates seamlessly and maintains consistency with the editor's styling and structure. This helps in removing unwanted formatting, scripts, or elements often copied from external sources like web pages or word processors. + +You can configure the paste settings using the `pasteSettings` property in the Block Editor control. This property allows you to define various options to control how content is pasted into the editor. + +## Configuring allowed styles + +The `allowedStyles` property in the `pasteSettings` model allows you to define which CSS styles are permitted when content is pasted into the editor. Any style not included in this list will be stripped from the pasted content. This ensures that only desired visual attributes are preserved, maintaining a clean and consistent look. + +By default, following styles are allowed: + +['font-weight', 'font-style', 'text-decoration', 'text-transform']. + +In the below example, only `font-weight` and `font-style` styles will be retained from the pasted content. All other inline styles will be removed. + +## Setting denied tags + +The `deniedTags` property in `pasteSettings` enables you to specify HTML tags that should be completely removed from the pasted content. This is particularly useful for stripping out potentially problematic or irrelevant tags, such as `script` tags, `iframe`s, or any other elements you don't want to allow in the editor. By default, the `deniedTags` property is an empty array, meaning no tags are removed by default. + +In the below example, any ` + + +{% endhighlight %} +{% endtabs %} + +N> Checkout the [Themes topic](https://ej2.syncfusion.com/aspnetcore/documentation/appearance/theme) to learn different ways ([CDN](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references#cdn-reference), [NPM package](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references#node-package-manager-npm), and [CRG](https://ej2.syncfusion.com/aspnetcore/documentation/common/custom-resource-generator)) to refer styles in ASP.NET Core application, and to have the expected appearance for Syncfusion® ASP.NET Core controls. + +N> Checkout the [Adding Script Reference](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your ASP.NET Core application. + +## Register Syncfusion® Script Manager + +Also, register the script manager `` at the end of `` in the ASP.NET Core application as follows. + +{% tabs %} +{% highlight cshtml tabtitle="~/_Layout.cshtml" %} + + + ... + + + + +{% endhighlight %} +{% endtabs %} + +## Add ASP.NET Core BlockEditor control + +Now, add the Syncfusion® ASP.NET Core BlockEditor tag helper in `~/Pages/Index.cshtml` page. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/block-editor/getting-started/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Default.cs" %} +{% include code-snippet/block-editor/getting-started/gettingstarted.cs %} +{% endhighlight %} +{% endtabs %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core BlockEditor control will be rendered in the default web browser. + +![ASP.NET Core BlockEditor Control](images/block-editor-control.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/globalization.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/globalization.md new file mode 100644 index 0000000000..8310a3df65 --- /dev/null +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/globalization.md @@ -0,0 +1,53 @@ +--- +layout: post +title: Globalization in ##Platform_Name## Block Editor Control | Syncfusion +description: Checkout and learn about Globalization with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +platform: ej2-asp-core-mvc +control: Block Editor +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Globalization in ##Platform_Name## Block Editor control + +## Localization + +The Block Editor can be localized to any culture by defining the text of the Block Editor in the corresponding culture. The default locale of the Block Editor is `en` (English). The following table represents the default text of the Block Editor in `en` culture. + +|KEY|Text| +|----|----| +|`paragraph`|Write something or '/' for commands.| +|`heading1`|Heading 1| +|`heading2`|Heading 2| +|`heading3`|Heading 3| +|`heading4`|Heading 4| +|`toggleParagraph`|Toggle Paragraph| +|`toggleHeading1`|Toggle Heading 1| +|`toggleHeading2`|Toggle Heading 2| +|`toggleHeading3`|Toggle Heading 3| +|`toggleHeading4`|Toggle Heading 4| +|`bulletList`|Add item| +|`numberedList`|Add item| +|`checkList`|Todo| +|`callout`|Write a callout| +|`addIconTooltip`|Click to insert below| +|`dragIconTooltipActionMenu`|Click to open| +|`dragIconTooltip`|(Hold to drag)| +|`insertLink`|Insert Link| +|`linkText`|Text| +|`linkTextPlaceholder`|Link text| +|`linkUrl`|URL| +|`linkUrlPlaceholder`|https://example.com| +|`linkTitle`|Title| +|`linkTitlePlaceholder`|Link title| +|`linkOpenInNewWindow`|Open in new window| +|`linkInsert`|Insert| +|`linkRemove`|Remove| +|`linkCancel`|Cancel| +|`codeCopyTooltip`|Copy code| + +The below example shows adding the German culture locale(`de-DE`) + +## RTL + +RTL provides an option to switch the text direction and layout of the Block Editor control from right to left by setting the `enableRtl` property to `true`. \ No newline at end of file diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/keyboard-shortcuts.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/keyboard-shortcuts.md new file mode 100644 index 0000000000..e0686226fa --- /dev/null +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/keyboard-shortcuts.md @@ -0,0 +1,80 @@ +--- +layout: post +title: Keyboard Shortcuts in ##Platform_Name## Block Editor Control | Syncfusion +description: Checkout and learn about Keyboard Shortcuts with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +platform: ej2-asp-core-mvc +control: Block Editor +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Keyboard Shortcuts in ##Platform_Name## Block Editor control + +The Block Editor control provides comprehensive keyboard shortcuts to enhance productivity and streamline content creation. These shortcuts are organized into different categories based on their functionality, allowing users to quickly access various features without relying on mouse interactions. + +## Content editing and formatting + +These keyboard shortcuts allow for quick access to content editing features like bold, italic, and text formatting options. + +| Actions | Windows | Mac | +|---------|---------|-----| +| Bold | Ctrl + B | ⌘ + B | +| Italic | Ctrl + I | ⌘ + I | +| Underline | Ctrl + U | ⌘ + U | +| Strikethrough | Ctrl + Shift + X | ⌘ + ⇧ + X | +| Insert Link | Ctrl + K | ⌘ + K | + +## Block creation and management + +These shortcuts enable quick creation of different block types and management of existing blocks. + +| Actions | Windows | Mac | +|---------|---------|-----| +| Create Paragraph | Ctrl + Alt + P | ⌘ + ⌥ + P | +| Create CheckList | Ctrl + Shift + 7 | ⌘ + ⇧ + 7 | +| Create Bullet List | Ctrl + Shift + 8 | ⌘ + ⇧ + 8 | +| Create Numbered List | Ctrl + Shift + 9 | ⌘ + ⇧ + 9 | +| Create Heading 1 | Ctrl + Alt + 1 | ⌘ + ⌥ + 1 | +| Create Heading 2 | Ctrl + Alt + 2 | ⌘ + ⌥ + 2 | +| Create Heading 3 | Ctrl + Alt + 3 | ⌘ + ⌥ + 3 | +| Create Heading 4 | Ctrl + Alt + 4 | ⌘ + ⌥ + 4 | +| Create Quote | Ctrl + Alt + Q | ⌘ + ⌥ + Q | +| Create Code Block | Ctrl + Alt + K | ⌘ + ⌥ + K | +| Create Callout | Ctrl + Alt + C | ⌘ + ⌥ + C | +| Insert Image | Ctrl + Alt + / | ⌘ + ⌥ + / | +| Insert Divider | Ctrl + Shift + - |⌘ + ⇧ + - | + +## Block level actions + +These shortcuts provide quick access to block-specific actions like duplication, deletion, indentation and movement. +[For indent, both ctrl+] and tab are supported. For outdent, both ctrl+[ and shift+tab are supported.] + +| Actions | Windows | Mac | +|---------|---------|-----| +| Duplicate Block | Ctrl + D | ⌘ + D | +| Delete Block | Ctrl + Shift + D | ⌘ + ⇧ + D | +| Move Block Up | Ctrl + Shift + ↑ | ⌘ + ⇧ + ↑ | +| Move Block Down | Ctrl + Shift + ↓ | ⌘ + ⇧ + ↓ | +| Increase Indent | Ctrl + ] or Tab | ⌘ + ] or Tab | +| Decrease Indent | Ctrl + [ or Shift + Tab | ⌘ + [ or ⇧ + Tab | + +## General editor operations + +These shortcuts cover general editor functionality including undo/redo operations and clipboard actions. + +| Actions | Windows | Mac | +|---------|---------|-----| +| Undo | Ctrl + Z | ⌘ + Z | +| Redo | Ctrl + Y | ⌘ + Y | +| Cut | Ctrl + X | ⌘ + X | +| Copy | Ctrl + C | ⌘ + C | +| Paste | Ctrl + V | ⌘ + V | +| Print | Ctrl + P | ⌘ + P | + +## Customizing keyboard shortcuts + +You can customize menu level shortcuts such as `Slash Command Menu`, `Block Action Menu` and `Context Menu` on the respective menu settings config by modifying it's `shortcut` property. + +For other operations, you can customize the keyboard shortcuts by configuring the `keyConfig` property when initializing the Block Editor control. This allows you to override default shortcuts or add new ones according to your application's requirements. + +In the below example, the shortcut for bold formatting is changed to Alt + B and for italic formatting to Alt + I. diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/methods.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/methods.md new file mode 100644 index 0000000000..bce8370773 --- /dev/null +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/methods.md @@ -0,0 +1,109 @@ +--- +layout: post +title: Methods in ##Platform_Name## Block Editor Control | Syncfusion +description: Checkout and learn about Methods with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +platform: ej2-asp-core-mvc +control: Block Editor +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Methods in ##Platform_Name## Block Editor control + +The Block Editor control provides a comprehensive set of public methods that allow you to programmatically interact with and manipulate the editor content. These methods enable you to add, remove, update, and manage blocks, as well as control selection, formatting, and other editor operations. + +## Block Management Methods + +### Adding a block + +You can add a new block to the editor at a specified position using the `addBlock` method. You can also insert the block before or after a target block. + +### Removing a block + +You can remove a block from the editor using the `removeBlock` method. + +### Getting a block + +You can retrieve a block model by its unique identifier using the `getBlock` method. Returns `null` if the block is not found. + +### Moving a block + +You can move a block from one position to another within the editor using the `moveBlock` method. + +### Updating a block + +You can update the properties of an existing block using the `updateBlock` method. Only the specified properties are modified while others remain unchanged. Returns `true` if the update was successful, `false` otherwise. + +## Selection and Cursor Methods + +### Setting text selection + +You can set the text selection within a specific content element using start and end positions with the `setSelection` method. + +### Setting cursor position + +You can place the cursor at a specific position within a block using the `setCursorPosition` method. + +### Getting selected blocks + +You can retrieve the currently selected blocks in the editor using the `getSelectedBlocks` method. Returns `null` if no blocks are selected. + +### Getting selection range + +You can get the current selection range in the editor using the `getRange` method. This method returns a `Range` object representing the selected text. Returns `null` if no selection is active. + +### Setting selection range + +You can set the selection range in the editor using the `selectRange` method. This method accepts a `Range` object that defines the start and end positions of the selection within the editor. + +### Selecting a block + +You can select a specific block in the editor using the `selectBlock` method. + +### Selecting all blocks + +You can select all blocks in the editor using the `selectAllBlocks` method. + +## Focus Management Methods + +### FocusIn + +You can utilize the `focusIn` method to give focus to the editor. This method ensures that the editor is ready for user input. + +### FocusOut + +You can remove focus from the editor using the focusOut method. This method clears any active selections and makes the editor inactive for user input. + +## Formatting Methods + +### Executing toolbar action + +You can execute a built-in toolbar formatting command using the `executeToolbarAction` method. This method is used to apply formatting such as bold, italic, or color to the selected text. + +### Enabling toolbar items + +You can enable specific toolbar items in the inline toolbar using the `enableToolbarItems` method. This method accepts a single item or an array of items to be enabled. + +### Disabling toolbar items + +You can disable specific toolbar items in the inline toolbar using the `disableToolbarItems` method. This method accepts a single item or an array of items to be disabled. + +## Data Export Methods + +### Getting data as JSON + +You can export the editor content in JSON format using the `getDataAsJson` method. This method allows you to export all blocks or a specific block. + +### Getting data as HTML + +You can export the editor content in HTML format using the `getDataAsHtml` method. This method allows you to export all blocks or a specific block. + +## Utility Methods + +### Getting block count + +You can utilize the `getBlockCount` method to retrieve the total number of blocks in the editor. + +### Printing editor content + +You can print the editor content using the `print` method. This method opens a print dialog with the current editor content formatted for printing. diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/paste-cleanup.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/paste-cleanup.md new file mode 100644 index 0000000000..6b78991ca0 --- /dev/null +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/paste-cleanup.md @@ -0,0 +1,51 @@ +--- +layout: post +title: Paste Clean-up in ##Platform_Name## Block Editor control | Syncfusion +description: Checkout and learn about paste clean-up with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +platform: ej2-javascript +control: Block Editor +publishingplatform: ##Platform_Name## +documentation: ug +domainurl: ##DomainURL## +--- + +# Paste Clean-up in ##Platform_Name## Block Editor control + +The Block Editor control provides robust paste clean-up functionalities to ensure that pasted content integrates seamlessly and maintains consistency with the editor's styling and structure. This helps in removing unwanted formatting, scripts, or elements often copied from external sources like web pages or word processors. + +You can configure the paste settings using the `pasteSettings` property in the Block Editor control. This property allows you to define various options to control how content is pasted into the editor. + +## Configuring allowed styles + +The `allowedStyles` property in the `pasteSettings` model allows you to define which CSS styles are permitted when content is pasted into the editor. Any style not included in this list will be stripped from the pasted content. This ensures that only desired visual attributes are preserved, maintaining a clean and consistent look. + +By default, following styles are allowed: + +['font-weight', 'font-style', 'text-decoration', 'text-transform']. + +In the below example, only `font-weight` and `font-style` styles will be retained from the pasted content. All other inline styles will be removed. + +## Setting denied tags + +The `deniedTags` property in `pasteSettings` enables you to specify HTML tags that should be completely removed from the pasted content. This is particularly useful for stripping out potentially problematic or irrelevant tags, such as `script` tags, `iframe`s, or any other elements you don't want to allow in the editor. By default, the `deniedTags` property is an empty array, meaning no tags are removed by default. + +In the below example, any ` diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/events/attachment-failure/tagHelper b/ej2-asp-core-mvc/code-snippet/ai-assistview/events/attachment-failure/tagHelper new file mode 100644 index 0000000000..176f1409ef --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/events/attachment-failure/tagHelper @@ -0,0 +1,23 @@ +@using Syncfusion.EJ2.InteractiveChat; + +
+ + + +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/events/attachment-remove/attachment-remove.cs b/ej2-asp-core-mvc/code-snippet/ai-assistview/events/attachment-remove/attachment-remove.cs new file mode 100644 index 0000000000..ce5492943e --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/events/attachment-remove/attachment-remove.cs @@ -0,0 +1,4 @@ +public ActionResult AttachmentRemoved() +{ + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/events/attachment-remove/razor b/ej2-asp-core-mvc/code-snippet/ai-assistview/events/attachment-remove/razor new file mode 100644 index 0000000000..2b7e34fa59 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/events/attachment-remove/razor @@ -0,0 +1,21 @@ +@using Syncfusion.EJ2.InteractiveChat + +
+ @Html.EJS().AIAssistView("aiAssistView").EnableAttachments(true).AttachmentRemoved("attachmentRemoved").PromptRequest("onPromptRequest").Created("onCreated").AttachmentSettings(new AIAssistViewAttachmentSettings() { SaveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Save"), RemoveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove") }).Render() +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/events/attachment-remove/tagHelper b/ej2-asp-core-mvc/code-snippet/ai-assistview/events/attachment-remove/tagHelper new file mode 100644 index 0000000000..3f1c8bcc2f --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/events/attachment-remove/tagHelper @@ -0,0 +1,23 @@ +@using Syncfusion.EJ2.InteractiveChat; + +
+ + + +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/events/attachment-success/attachment-success.cs b/ej2-asp-core-mvc/code-snippet/ai-assistview/events/attachment-success/attachment-success.cs new file mode 100644 index 0000000000..afd74cff9e --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/events/attachment-success/attachment-success.cs @@ -0,0 +1,4 @@ +public ActionResult AttachmentUploadSuccess() +{ + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/events/attachment-success/razor b/ej2-asp-core-mvc/code-snippet/ai-assistview/events/attachment-success/razor new file mode 100644 index 0000000000..f7863e6ebd --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/events/attachment-success/razor @@ -0,0 +1,21 @@ +@using Syncfusion.EJ2.InteractiveChat + +
+ @Html.EJS().AIAssistView("aiAssistView").EnableAttachments(true).AttachmentUploadSuccess("attachmentUploadSuccess").PromptRequest("onPromptRequest").Created("onCreated").AttachmentSettings(new AIAssistViewAttachmentSettings() { SaveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Save"), RemoveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove") }).Render() +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/events/attachment-success/tagHelper b/ej2-asp-core-mvc/code-snippet/ai-assistview/events/attachment-success/tagHelper new file mode 100644 index 0000000000..cc1c9f008e --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/events/attachment-success/tagHelper @@ -0,0 +1,23 @@ +@using Syncfusion.EJ2.InteractiveChat; + +
+ + + +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/events/before-attachment/before-attachment.cs b/ej2-asp-core-mvc/code-snippet/ai-assistview/events/before-attachment/before-attachment.cs new file mode 100644 index 0000000000..33385edb6e --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/events/before-attachment/before-attachment.cs @@ -0,0 +1,4 @@ +public ActionResult BeforeAttachmentUpload() +{ + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/events/before-attachment/razor b/ej2-asp-core-mvc/code-snippet/ai-assistview/events/before-attachment/razor new file mode 100644 index 0000000000..dc7a2c38ce --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/events/before-attachment/razor @@ -0,0 +1,21 @@ +@using Syncfusion.EJ2.InteractiveChat + +
+ @Html.EJS().AIAssistView("aiAssistView").EnableAttachments(true).BeforeAttachmentUpload("beforeAttachmentUpload").PromptRequest("onPromptRequest").Created("onCreated").AttachmentSettings(new AIAssistViewAttachmentSettings() { SaveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Save"), RemoveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove") }).Render() +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/events/before-attachment/tagHelper b/ej2-asp-core-mvc/code-snippet/ai-assistview/events/before-attachment/tagHelper new file mode 100644 index 0000000000..8b95b36633 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/events/before-attachment/tagHelper @@ -0,0 +1,23 @@ +@using Syncfusion.EJ2.InteractiveChat; + +
+ + + +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/enable-attachments/enable-attachments.cs b/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/enable-attachments/enable-attachments.cs new file mode 100644 index 0000000000..b4f8b6c9b7 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/enable-attachments/enable-attachments.cs @@ -0,0 +1,4 @@ +public ActionResult EnableAttachments() +{ + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/enable-attachments/razor b/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/enable-attachments/razor new file mode 100644 index 0000000000..468db74fec --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/enable-attachments/razor @@ -0,0 +1,18 @@ +@using Syncfusion.EJ2.InteractiveChat + +
+ @Html.EJS().AIAssistView("aiAssistView").EnableAttachments(true).PromptRequest("onPromptRequest").Created("onCreated").Render() +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/enable-attachments/tagHelper b/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/enable-attachments/tagHelper new file mode 100644 index 0000000000..1a75e43a17 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/enable-attachments/tagHelper @@ -0,0 +1,18 @@ +@using Syncfusion.EJ2.InteractiveChat; + +
+ +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/file-size/file-size.cs b/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/file-size/file-size.cs new file mode 100644 index 0000000000..3c0a171c3f --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/file-size/file-size.cs @@ -0,0 +1,4 @@ +public ActionResult FileSize() +{ + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/file-size/razor b/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/file-size/razor new file mode 100644 index 0000000000..5e64cdc675 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/file-size/razor @@ -0,0 +1,18 @@ +@using Syncfusion.EJ2.InteractiveChat + +
+ @Html.EJS().AIAssistView("aiAssistView").EnableAttachments(true).PromptRequest("onPromptRequest").Created("onCreated").AttachmentSettings(new AIAssistViewAttachmentSettings() { SaveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Save"), RemoveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove"), MaxFileSize(1000000) }).Render() +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/file-size/tagHelper b/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/file-size/tagHelper new file mode 100644 index 0000000000..8b6354a70f --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/file-size/tagHelper @@ -0,0 +1,20 @@ +@using Syncfusion.EJ2.InteractiveChat; + +
+ + + +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/file-type/file-type.cs b/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/file-type/file-type.cs new file mode 100644 index 0000000000..20c016a26d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/file-type/file-type.cs @@ -0,0 +1,4 @@ +public ActionResult FileType() +{ + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/file-type/razor b/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/file-type/razor new file mode 100644 index 0000000000..eb9b512abc --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/file-type/razor @@ -0,0 +1,18 @@ +@using Syncfusion.EJ2.InteractiveChat + +
+ @Html.EJS().AIAssistView("aiAssistView").EnableAttachments(true).PromptRequest("onPromptRequest").Created("onCreated").AttachmentSettings(new AIAssistViewAttachmentSettings() { SaveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Save"), RemoveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove"), AllowedFileType(".png") }).Render() +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/file-type/tagHelper b/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/file-type/tagHelper new file mode 100644 index 0000000000..8c589c53c0 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/file-type/tagHelper @@ -0,0 +1,20 @@ +@using Syncfusion.EJ2.InteractiveChat; + +
+ + + +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/save-remove-url/razor b/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/save-remove-url/razor new file mode 100644 index 0000000000..fa64908271 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/save-remove-url/razor @@ -0,0 +1,18 @@ +@using Syncfusion.EJ2.InteractiveChat + +
+ @Html.EJS().AIAssistView("aiAssistView").EnableAttachments(true).PromptRequest("onPromptRequest").Created("onCreated").AttachmentSettings(new AIAssistViewAttachmentSettings() { SaveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Save"), RemoveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove") }).Render() +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/save-remove-url/save-remove-url.cs b/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/save-remove-url/save-remove-url.cs new file mode 100644 index 0000000000..11e0c0e861 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/save-remove-url/save-remove-url.cs @@ -0,0 +1,4 @@ +public ActionResult SaveRemoveUrl() +{ + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/save-remove-url/tagHelper b/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/save-remove-url/tagHelper new file mode 100644 index 0000000000..bb43dac582 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/save-remove-url/tagHelper @@ -0,0 +1,20 @@ +@using Syncfusion.EJ2.InteractiveChat; + +
+ + + +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/autocomplete/filtering/arrayofstrings/arrayofstrings.cs b/ej2-asp-core-mvc/code-snippet/autocomplete/filtering/arrayofstrings/arrayofstrings.cs new file mode 100644 index 0000000000..0be58f38e3 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/autocomplete/filtering/arrayofstrings/arrayofstrings.cs @@ -0,0 +1,18 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Threading.Tasks; +using Microsoft.AspNetCore.Mvc; +using WebApplication1.Models; + +namespace WebApplication1.Controllers +{ + public class AutoCompleteController : Controller + { + public ActionResult arrayofstring() + { + ViewBag.data = new string[] { "Badminton", "Basketball", "Cricket", "Football", "Golf", "Gymnastics", "Hockey", "Tennis" }; + return View(); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/autocomplete/filtering/arrayofstrings/razor b/ej2-asp-core-mvc/code-snippet/autocomplete/filtering/arrayofstrings/razor new file mode 100644 index 0000000000..2f76944bc6 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/autocomplete/filtering/arrayofstrings/razor @@ -0,0 +1 @@ +@Html.EJS().AutoComplete("games").Placeholder("Select a game").PopupHeight("200px").DataSource((IEnumerable)ViewBag.data).DebounceDelay(300).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/autocomplete/filtering/arrayofstrings/tagHelper b/ej2-asp-core-mvc/code-snippet/autocomplete/filtering/arrayofstrings/tagHelper new file mode 100644 index 0000000000..850099eb7f --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/autocomplete/filtering/arrayofstrings/tagHelper @@ -0,0 +1,11 @@ +@{ + .... + var data = new string[] { "Badminton", "Basketball", "Cricket", "Football", "Golf", "Gymnastics", "Hockey", "Tennis" }; +} + +
+
+ + +
+
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/getting-started/gettingstarted.cs b/ej2-asp-core-mvc/code-snippet/block-editor/getting-started/gettingstarted.cs new file mode 100644 index 0000000000..2779a246e7 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/block-editor/getting-started/gettingstarted.cs @@ -0,0 +1,4 @@ +public ActionResult Index() + { + return View(); + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/getting-started/razor b/ej2-asp-core-mvc/code-snippet/block-editor/getting-started/razor new file mode 100644 index 0000000000..8234fa4e85 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/block-editor/getting-started/razor @@ -0,0 +1,11 @@ +@using Syncfusion.EJ2.BlockEditor + +
+ @Html.EJS().BlockEditor("block-editor").Render() +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/getting-started/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/getting-started/tagHelper new file mode 100644 index 0000000000..4d951e1d53 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/block-editor/getting-started/tagHelper @@ -0,0 +1,11 @@ +@using Syncfusion.EJ2.BlockEditor + +
+ +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/compact-mode/compact-mode.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/compact-mode/compact-mode.cs new file mode 100644 index 0000000000..4c854cc119 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/compact-mode/compact-mode.cs @@ -0,0 +1,29 @@ +using Syncfusion.EJ2.InteractiveChat; + +public ChatUIUser CurrentUser { get; set; } +public List ChatMessagesData { get; set; } = new List(); +public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" }; +public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama" }; + +public ActionResult CompactMode() +{ + CurrentUser = CurrentUserModel; + ChatMessagesData.Add(new ChatUIMessage() + { + Text = "Hi Michale, are we on track for the deadline?", + Author = CurrentUserModel + }); + ChatMessagesData.Add(new ChatUIMessage() + { + Text = "Yes, the design phase is complete.", + Author = MichaleUserModel + }); + ChatMessagesData.Add(new ChatUIMessage() + { + Text = "I’ll review it and send feedback by today.", + Author = CurrentUserModel + }); + ViewBag.ChatMessagesData = ChatMessagesData; + ViewBag.CurrentUser = CurrentUser; + return View(); +} diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/compact-mode/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/compact-mode/razor new file mode 100644 index 0000000000..7443b421b5 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/compact-mode/razor @@ -0,0 +1,5 @@ +@using Syncfusion.EJ2.InteractiveChat + +
+ @Html.EJS().ChatUI("chatUser").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).EnableCompactMode(true).Render() +
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/compact-mode/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/compact-mode/tagHelper new file mode 100644 index 0000000000..8812862acf --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/compact-mode/tagHelper @@ -0,0 +1,13 @@ +@using Syncfusion.EJ2.InteractiveChat; + +
+ + + + @foreach (var message in ViewBag.ChatMessagesData) + { + + } + + +
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/forwarded/forwarded.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/forwarded/forwarded.cs new file mode 100644 index 0000000000..f44e2407c8 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/forwarded/forwarded.cs @@ -0,0 +1,30 @@ +using Syncfusion.EJ2.InteractiveChat; + +public ChatUIUser CurrentUser { get; set; } +public List ChatMessagesData { get; set; } = new List(); +public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" }; +public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama" }; + +public ActionResult Forward() +{ + CurrentUser = CurrentUserModel; + ChatMessagesData.Add(new ChatUIMessage() + { + Text = "Hi Michale, are we on track for the deadline?", + Author = CurrentUserModel + }); + ChatMessagesData.Add(new ChatUIMessage() + { + Text = "Yes, the design phase is complete.", + Author = MichaleUserModel + }); + ChatMessagesData.Add(new ChatUIMessage() + { + Text = "I’ll review it and send feedback by today.", + Author = CurrentUserModel, + IsForwarded = true + }); + ViewBag.ChatMessagesData = ChatMessagesData; + ViewBag.CurrentUser = CurrentUser; + return View(); +} diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/forwarded/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/forwarded/razor new file mode 100644 index 0000000000..568547c743 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/forwarded/razor @@ -0,0 +1,5 @@ +@using Syncfusion.EJ2.InteractiveChat + +
+ @Html.EJS().ChatUI("chatUser").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).Render() +
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/forwarded/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/forwarded/tagHelper new file mode 100644 index 0000000000..0e0b27c482 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/forwarded/tagHelper @@ -0,0 +1,13 @@ +@using Syncfusion.EJ2.InteractiveChat; + +
+ + + + @foreach (var message in ViewBag.ChatMessagesData) + { + + } + + +
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/itemClicked/itemClicked.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/itemClicked/itemClicked.cs new file mode 100644 index 0000000000..c41252efa3 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/itemClicked/itemClicked.cs @@ -0,0 +1,38 @@ +using Syncfusion.EJ2.InteractiveChat; + +public ChatUIUser CurrentUser { get; set; } +public List ChatMessagesData { get; set; } = new List(); +public List MessageToolbarItems { get; set; } = new List(); +public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" }; +public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama" }; + +public ActionResult ItemClicked() +{ + CurrentUser = CurrentUserModel; + ChatMessagesData.Add(new ChatUIMessage() + { + Text = "Hi Michale, are we on track for the deadline?", + Author = CurrentUserModel + }); + ChatMessagesData.Add(new ChatUIMessage() + { + Text = "Yes, the design phase is complete.", + Author = MichaleUserModel + }); + ChatMessagesData.Add(new ChatUIMessage() + { + Text = "I’ll review it and send feedback by today.", + Author = CurrentUserModel, + + }); + + MessageToolbarItems.Add(new ToolbarItemModel { iconCss = "e-icons e-chat-forward", tooltipText = "Forward" }); + MessageToolbarItems.Add(new ToolbarItemModel { iconCss = "e-icons e-chat-copy", tooltipText = "Copy" }); + MessageToolbarItems.Add(new ToolbarItemModel { iconCss = "e-icons e-chat-reply", tooltipText = "Reply" }); + MessageToolbarItems.Add(new ToolbarItemModel { iconCss = "e-icons e-chat-pin", tooltipText = "Pin" }); + MessageToolbarItems.Add(new ToolbarItemModel { iconCss = "e-icons e-chat-trash", tooltipText = "Delete" }); + ViewBag.MessageToolbarItems = MessageToolbarItems; + ViewBag.ChatMessagesData = ChatMessagesData; + ViewBag.CurrentUser = CurrentUser; + return View(); +} diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/itemClicked/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/itemClicked/razor new file mode 100644 index 0000000000..4170414c84 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/itemClicked/razor @@ -0,0 +1,26 @@ +@using Syncfusion.EJ2.InteractiveChat + +
+ @Html.EJS().ChatUI("chatUser").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).MessageToolbarSettings(new ChatUIMessageToolbarSettings() { Items=ViewBag.MessageToolbarItems, ItemClicked = "onMessageToolbarClicked" }).Render() +
+ +@section PreScripts { + +} diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/itemClicked/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/itemClicked/tagHelper new file mode 100644 index 0000000000..f53e4fbe4f --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/itemClicked/tagHelper @@ -0,0 +1,35 @@ +@using Syncfusion.EJ2.InteractiveChat; + +
+ + + + + @foreach (var message in ViewBag.ChatMessagesData) + { + + } + + +
+ +@section PreScripts { + +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/items/items.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/items/items.cs new file mode 100644 index 0000000000..087b3562bb --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/items/items.cs @@ -0,0 +1,38 @@ +using Syncfusion.EJ2.InteractiveChat; + +public ChatUIUser CurrentUser { get; set; } +public List ChatMessagesData { get; set; } = new List(); +public List MessageToolbarItems { get; set; } = new List(); +public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" }; +public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama" }; + +public ActionResult Items() +{ + CurrentUser = CurrentUserModel; + ChatMessagesData.Add(new ChatUIMessage() + { + Text = "Hi Michale, are we on track for the deadline?", + Author = CurrentUserModel + }); + ChatMessagesData.Add(new ChatUIMessage() + { + Text = "Yes, the design phase is complete.", + Author = MichaleUserModel + }); + ChatMessagesData.Add(new ChatUIMessage() + { + Text = "I’ll review it and send feedback by today.", + Author = CurrentUserModel, + + }); + + MessageToolbarItems.Add(new ToolbarItemModel { iconCss = "e-icons e-chat-forward", tooltipText = "Forward" }); + MessageToolbarItems.Add(new ToolbarItemModel { iconCss = "e-icons e-chat-copy", tooltipText = "Copy" }); + MessageToolbarItems.Add(new ToolbarItemModel { iconCss = "e-icons e-chat-reply", tooltipText = "Reply" }); + MessageToolbarItems.Add(new ToolbarItemModel { iconCss = "e-icons e-chat-pin", tooltipText = "Pin" }); + MessageToolbarItems.Add(new ToolbarItemModel { iconCss = "e-icons e-chat-trash", tooltipText = "Delete" }); + ViewBag.MessageToolbarItems = MessageToolbarItems; + ViewBag.ChatMessagesData = ChatMessagesData; + ViewBag.CurrentUser = CurrentUser; + return View(); +} diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/items/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/items/razor new file mode 100644 index 0000000000..e56732296b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/items/razor @@ -0,0 +1,5 @@ +@using Syncfusion.EJ2.InteractiveChat + +
+ @Html.EJS().ChatUI("chatUser").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).MessageToolbarSettings(new ChatUIMessageToolbarSettings() { Items=ViewBag.MessageToolbarItems }).Render() +
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/items/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/items/tagHelper new file mode 100644 index 0000000000..b83e813e2f --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/items/tagHelper @@ -0,0 +1,14 @@ +@using Syncfusion.EJ2.InteractiveChat; + +
+ + + + + @foreach (var message in ViewBag.ChatMessagesData) + { + + } + + +
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/pinned/pinned.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/pinned/pinned.cs new file mode 100644 index 0000000000..bcac36a8c8 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/pinned/pinned.cs @@ -0,0 +1,30 @@ +using Syncfusion.EJ2.InteractiveChat; + +public ChatUIUser CurrentUser { get; set; } +public List ChatMessagesData { get; set; } = new List(); +public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" }; +public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama" }; + +public ActionResult Pinned() +{ + CurrentUser = CurrentUserModel; + ChatMessagesData.Add(new ChatUIMessage() + { + Text = "Hi Michale, are we on track for the deadline?", + Author = CurrentUserModel + }); + ChatMessagesData.Add(new ChatUIMessage() + { + Text = "Yes, the design phase is complete.", + Author = MichaleUserModel + }); + ChatMessagesData.Add(new ChatUIMessage() + { + Text = "I’ll review it and send feedback by today.", + Author = CurrentUserModel, + IsPinned = true + }); + ViewBag.ChatMessagesData = ChatMessagesData; + ViewBag.CurrentUser = CurrentUser; + return View(); +} diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/pinned/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/pinned/razor new file mode 100644 index 0000000000..568547c743 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/pinned/razor @@ -0,0 +1,5 @@ +@using Syncfusion.EJ2.InteractiveChat + +
+ @Html.EJS().ChatUI("chatUser").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).Render() +
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/pinned/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/pinned/tagHelper new file mode 100644 index 0000000000..7ea8c0095f --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/pinned/tagHelper @@ -0,0 +1,13 @@ +@using Syncfusion.EJ2.InteractiveChat; + +
+ + + + @foreach (var message in ViewBag.ChatMessagesData) + { + + } + + +
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/replyTo/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/replyTo/razor new file mode 100644 index 0000000000..568547c743 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/replyTo/razor @@ -0,0 +1,5 @@ +@using Syncfusion.EJ2.InteractiveChat + +
+ @Html.EJS().ChatUI("chatUser").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).Render() +
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/replyTo/replyTo.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/replyTo/replyTo.cs new file mode 100644 index 0000000000..9b03cdfa56 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/replyTo/replyTo.cs @@ -0,0 +1,36 @@ +using Syncfusion.EJ2.InteractiveChat; + +public ChatUIUser CurrentUser { get; set; } +public List ChatMessagesData { get; set; } = new List(); +public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" }; +public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama" }; + +public ActionResult Pinned() +{ + CurrentUser = CurrentUserModel; + ChatMessagesData.Add(new ChatUIMessage() + { + Text = "Hi Michale, are we on track for the deadline?", + Author = CurrentUserModel, + Id = "chat-message-1" + }); + ChatMessagesData.Add(new ChatUIMessage() + { + Text = "Yes, the design phase is complete.", + Author = MichaleUserModel, + Id = "chat-message-2" + }); + ChatMessagesData.Add(new ChatUIMessage() + { + Text = "I’ll review it and send feedback by today.", + Author = CurrentUserModel, + ReplyTo = { + User = MichaleUserModel, + Text = "Yes, the design phase is complete.", + MessageID = "chat-message-2" + } + }); + ViewBag.ChatMessagesData = ChatMessagesData; + ViewBag.CurrentUser = CurrentUser; + return View(); +} diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/replyTo/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/replyTo/tagHelper new file mode 100644 index 0000000000..e471ef84fe --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/replyTo/tagHelper @@ -0,0 +1,13 @@ +@using Syncfusion.EJ2.InteractiveChat; + +
+ + + + @foreach (var message in ViewBag.ChatMessagesData) + { + + } + + +
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusIconCss/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusIconCss/razor new file mode 100644 index 0000000000..1965a96aaa --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusIconCss/razor @@ -0,0 +1,5 @@ +@using Syncfusion.EJ2.InteractiveChat + +
+ @Html.EJS().ChatUI("chatUser").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).HeaderText("Design Community").HeaderIconCss("chat_header_icon").Render() +
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusIconCss/statusIconCss.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusIconCss/statusIconCss.cs new file mode 100644 index 0000000000..008eb7111c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusIconCss/statusIconCss.cs @@ -0,0 +1,36 @@ +using Syncfusion.EJ2.InteractiveChat; + +public ChatUIUser CurrentUser { get; set; } +public List ChatMessagesData { get; set; } = new List(); +public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Alice Brown", StatusIconCss = "e-icons e-user-online" }; +public ChatUIUser CommunityMessageUser1 { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama", StatusIconCss = "e-icons e-user-away" }; +public ChatUIUser CommunityMessageUser2 { get; set; } = new ChatUIUser() { Id = "user3", User = "Charlie", StatusIconCss = "e-icons e-user-busy" }; +public ChatUIUser CommunityMessageUser3 { get; set; } = new ChatUIUser() { Id = "user4", User = "Jordan Peele", StatusIconCss = "e-icons e-user-offline" }; + +public ActionResult StatusIconCss() +{ + CurrentUser = CurrentUserModel; + ChatMessagesData.Add(new ChatUIMessage() + { + Text = "Hey Michale, Charlie! Seen the latest posts in the Design Community? Amazing projects!", + Author = CurrentUserModel + }); + ChatMessagesData.Add(new ChatUIMessage() + { + Text = "Hi Alice! Yes, Dana’s new UI design is incredible.", + Author = CommunityMessageUser1 + }); + ChatMessagesData.Add(new ChatUIMessage() + { + Text = "Dana’s work is so inspiring!", + Author = CommunityMessageUser3 + }); + ChatMessagesData.Add(new ChatUIMessage() + { + Text = "I am excited to see the new projects.", + Author = CommunityMessageUser2 + }); + ViewBag.ChatMessagesData = ChatMessagesData; + ViewBag.CurrentUser = CurrentUser; + return View(); +} diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusIconCss/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusIconCss/tagHelper new file mode 100644 index 0000000000..706abb5a68 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusIconCss/tagHelper @@ -0,0 +1,13 @@ +@using Syncfusion.EJ2.InteractiveChat; + +
+ + + + @foreach (var message in ViewBag.ChatMessagesData) + { + + } + + +
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/width/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/width/razor new file mode 100644 index 0000000000..2d8dab1d47 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/width/razor @@ -0,0 +1,5 @@ +@using Syncfusion.EJ2.InteractiveChat + +
+ @Html.EJS().ChatUI("chatUser").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).MessageToolbarSettings(new ChatUIMessageToolbarSettings() { Width="50%"}).Render() +
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/width/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/width/tagHelper new file mode 100644 index 0000000000..45c73eee5d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/width/tagHelper @@ -0,0 +1,14 @@ +@using Syncfusion.EJ2.InteractiveChat; + +
+ + + + + @foreach (var message in ViewBag.ChatMessagesData) + { + + } + + +
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/width/width.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/width/width.cs new file mode 100644 index 0000000000..199b29eff3 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/width/width.cs @@ -0,0 +1,30 @@ +using Syncfusion.EJ2.InteractiveChat; + +public ChatUIUser CurrentUser { get; set; } +public List ChatMessagesData { get; set; } = new List(); +public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" }; +public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama" }; + +public ActionResult Width() +{ + CurrentUser = CurrentUserModel; + ChatMessagesData.Add(new ChatUIMessage() + { + Text = "Hi Michale, are we on track for the deadline?", + Author = CurrentUserModel + }); + ChatMessagesData.Add(new ChatUIMessage() + { + Text = "Yes, the design phase is complete.", + Author = MichaleUserModel + }); + ChatMessagesData.Add(new ChatUIMessage() + { + Text = "I’ll review it and send feedback by today.", + Author = CurrentUserModel, + + }); + ViewBag.ChatMessagesData = ChatMessagesData; + ViewBag.CurrentUser = CurrentUser; + return View(); +} diff --git a/ej2-asp-core-mvc/code-snippet/combobox/filtering/arrayofstrings/arrayofstrings.cs b/ej2-asp-core-mvc/code-snippet/combobox/filtering/arrayofstrings/arrayofstrings.cs new file mode 100644 index 0000000000..d572966948 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/combobox/filtering/arrayofstrings/arrayofstrings.cs @@ -0,0 +1,18 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Threading.Tasks; +using Microsoft.AspNetCore.Mvc; +using WebApplication1.Models; + +namespace WebApplication1.Controllers +{ + public class ComboBoxController : Controller + { + public ActionResult arrayofstring() + { + ViewBag.data = new string[] { "Badminton", "Basketball", "Cricket", "Football", "Golf", "Gymnastics", "Hockey", "Tennis" }; + return View(); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/combobox/filtering/arrayofstrings/razor b/ej2-asp-core-mvc/code-snippet/combobox/filtering/arrayofstrings/razor new file mode 100644 index 0000000000..17e19d6a98 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/combobox/filtering/arrayofstrings/razor @@ -0,0 +1 @@ +@Html.EJS().ComboBox("games").Placeholder("Select a game").PopupHeight("200px").DataSource((IEnumerable)ViewBag.data).DebounceDelay(300).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/combobox/filtering/arrayofstrings/tagHelper b/ej2-asp-core-mvc/code-snippet/combobox/filtering/arrayofstrings/tagHelper new file mode 100644 index 0000000000..dc29aa125f --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/combobox/filtering/arrayofstrings/tagHelper @@ -0,0 +1,10 @@ +@{ + var data = new string[] { "Badminton", "Basketball", "Cricket", "Football", "Golf", "Gymnastics", "Hockey", "Tennis" }; +} + +
+
+ + +
+
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/daterangepicker/date-format/date-format.cs b/ej2-asp-core-mvc/code-snippet/daterangepicker/date-format/date-format.cs new file mode 100644 index 0000000000..19c3e07802 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/daterangepicker/date-format/date-format.cs @@ -0,0 +1,18 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Threading.Tasks; +using Microsoft.AspNetCore.Mvc; + +namespace EJ2CoreSampleBrowser.Controllers +{ + public class HomeController : Controller + { + public ActionResult DateRange() + { + ViewBag.startDate = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 20); + ViewBag.endDate = new DateTime(DateTime.Now.Year, DateTime.Now.Month + 1, 25); + return View(); + } + } +} diff --git a/ej2-asp-core-mvc/code-snippet/daterangepicker/date-format/razor b/ej2-asp-core-mvc/code-snippet/daterangepicker/date-format/razor new file mode 100644 index 0000000000..3550c84cff --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/daterangepicker/date-format/razor @@ -0,0 +1 @@ +@Html.EJS().DateRangePicker("Rangepicker").Format("dd/MMM/yy hh:mm a").StartDate(ViewBag.startDate).EndDate(ViewBag.endDate).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/daterangepicker/date-format/tagHelper b/ej2-asp-core-mvc/code-snippet/daterangepicker/date-format/tagHelper new file mode 100644 index 0000000000..ad3237e739 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/daterangepicker/date-format/tagHelper @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/daterangepicker/input-format/input-format.cs b/ej2-asp-core-mvc/code-snippet/daterangepicker/input-format/input-format.cs new file mode 100644 index 0000000000..19c3e07802 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/daterangepicker/input-format/input-format.cs @@ -0,0 +1,18 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Threading.Tasks; +using Microsoft.AspNetCore.Mvc; + +namespace EJ2CoreSampleBrowser.Controllers +{ + public class HomeController : Controller + { + public ActionResult DateRange() + { + ViewBag.startDate = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 20); + ViewBag.endDate = new DateTime(DateTime.Now.Year, DateTime.Now.Month + 1, 25); + return View(); + } + } +} diff --git a/ej2-asp-core-mvc/code-snippet/daterangepicker/input-format/razor b/ej2-asp-core-mvc/code-snippet/daterangepicker/input-format/razor new file mode 100644 index 0000000000..5e32731cf0 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/daterangepicker/input-format/razor @@ -0,0 +1 @@ +@Html.EJS().DateRangePicker("Rangepicker").Format("dd/MMM/yy hh:mm a").StartDate(ViewBag.startDate).EndDate(ViewBag.endDate).InputFormats(new string[] { "dd/MM/yyyy", "yyyyMMdd" }).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/daterangepicker/input-format/tagHelper b/ej2-asp-core-mvc/code-snippet/daterangepicker/input-format/tagHelper new file mode 100644 index 0000000000..f1607cdb55 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/daterangepicker/input-format/tagHelper @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/container/basiccontainer/Container.cs b/ej2-asp-core-mvc/code-snippet/diagram/container/basiccontainer/Container.cs new file mode 100644 index 0000000000..fc734bf95c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/container/basiccontainer/Container.cs @@ -0,0 +1,102 @@ +using System; +using System.Collections.Generic; +using System.Web.Mvc; +using Syncfusion.EJ2.Diagrams; + +namespace EJ2MVCSampleBrowser.Controllers.Diagram +{ + public partial class DiagramController : Controller + { + // GET: Nodes + public ActionResult Nodes() + { + List nodes = new List(); + List Node1Annots = new List(); + Node1Annots.Add(new DiagramNodeAnnotation() + { + Content = "Node 1", + }); + nodes.Add(new Node() + { + Id = "node1", + Width = 100, + Height = 100, + text = "node1", + Margin = new DiagramMargin() + { + Left = 50, + Top = 30 + }, + Shape = new DiagramShapeStyle() + { + Type = "Basic", + Shape = "Rectangle", + CornerRadius = 4 + }, + Style = new NodeStyleNodes() + { + Fill = "white", + StrokeColor = "#2546BB", + StrokeWidth = 1 + }, + Annotations = Node1Annots + }); + List Node2Annots = new List(); + Node2Annots.Add(new DiagramNodeAnnotation() + { + Content = "Node 2", + }); + nodes.Add(new Node() + { + Id = "node2", + Width = 100, + Height = 100, + text = "node2", + Margin = new DiagramMargin() + { + Left = 200, + Top = 130 + }, + Shape = new DiagramShapeStyle() + { + Type = "Basic", + Shape = "Rectangle", + CornerRadius = 4 + }, + Style = new NodeStyleNodes() + { + Fill = "white", + StrokeColor = "#2546BB", + StrokeWidth = 1 + }, + Annotations = Node2Annots + }); + // Container Node + nodes.Add(new Node() + { + Id = "container", + Width = 350, + Height = 280, + OffsetX = 250, + OffsetY = 250, + Shape = new DiagramShapeStyle() + { + Type = "Container", + Children = ["node1", "node2"] + }, + Style = new NodeStyleNodes() + { + Fill = "#E9EEFF", + StrokeColor = "#2546BB", + StrokeWidth = 1 + }, + }); + ViewData.nodes = nodes; + return View(); + } + } + public class Node : DiagramNode + { + public string text; + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/container/basiccontainer/razor b/ej2-asp-core-mvc/code-snippet/diagram/container/basiccontainer/razor new file mode 100644 index 0000000000..1c23b67aa6 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/container/basiccontainer/razor @@ -0,0 +1,6 @@ +@Syncfusion.EJ2.Diagrams; + +@(Html.EJS().Diagram("container").Width("100%").Height("500px") + .Nodes((List)ViewData["nodes"]) + .Render() +) \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/container/basiccontainer/tagHelper b/ej2-asp-core-mvc/code-snippet/diagram/container/basiccontainer/tagHelper new file mode 100644 index 0000000000..cdabde668a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/container/basiccontainer/tagHelper @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/container/containerheader/Container.cs b/ej2-asp-core-mvc/code-snippet/diagram/container/containerheader/Container.cs new file mode 100644 index 0000000000..b23f025d50 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/container/containerheader/Container.cs @@ -0,0 +1,108 @@ +using System; +using System.Collections.Generic; +using System.Web.Mvc; +using Syncfusion.EJ2.Diagrams; + +namespace EJ2MVCSampleBrowser.Controllers.Diagram +{ + public partial class DiagramController : Controller + { + // GET: Nodes + public ActionResult Nodes() + { + List nodes = new List(); + List Node1Annots = new List(); + Node1Annots.Add(new DiagramNodeAnnotation() + { + Content = "Node 1", + Style = new DiagramTextStyle() { Color = "white", FontFamily = "Arial" } + }); + nodes.Add(new Node() + { + Id = "node1", + Width = 100, + Height = 100, + text = "node1", + Margin = new DiagramMargin() + { + Left = 50, + Top = 30 + }, + Style = new NodeStyleNodes() + { + Fill = "#357BD2", + StrokeColor = "white" + }, + Annotations = Node1Annots + }); + List Node2Annots = new List(); + Node2Annots.Add(new DiagramNodeAnnotation() + { + Content = "Node 2", + Style = new DiagramTextStyle() { Color = "white", FontFamily = "Arial" } + }); + nodes.Add(new Node() + { + Id = "node2", + Width = 100, + Height = 100, + text = "node1", + Margin = new DiagramMargin() + { + Left = 200, + Top = 130 + }, + Style = new NodeStyleNodes() + { + Fill = "357BD2", + StrokeColor = "white" + }, + Annotations = Node2Annots + }); + // Container Node + nodes.Add(new Node() + { + Id = "container", + Width = 350, + Height = 300, + OffsetX = 250, + OffsetY = 250, + Shape = new DiagramShapeStyle() + { + Type = "Container", + Header = new DiagramHeader() + { + Annotation = new DiagramNodeAnnotation() + { + Content = "Container Title", + Style = new DiagramTextStyle() + { + FontSize = 18, + Bold = true, + Color = "white", + } + }, + Style = new DiagramTextStyle() + { + Fill = "#3c63ac", + StrokeColor = "30518f" + } + }, + Children = ["node1", "node2"], + }, + Style = new NodeStyleNodes() + { + Fill = "white", + StrokeColor = "#30518f", + StrokeDashArray = "4 4" + }, + }); + ViewData.nodes = nodes; + return View(); + } + } + public class Node : DiagramNode + { + public string text; + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/container/containerheader/razor b/ej2-asp-core-mvc/code-snippet/diagram/container/containerheader/razor new file mode 100644 index 0000000000..1c23b67aa6 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/container/containerheader/razor @@ -0,0 +1,6 @@ +@Syncfusion.EJ2.Diagrams; + +@(Html.EJS().Diagram("container").Width("100%").Height("500px") + .Nodes((List)ViewData["nodes"]) + .Render() +) \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/container/containerheader/tagHelper b/ej2-asp-core-mvc/code-snippet/diagram/container/containerheader/tagHelper new file mode 100644 index 0000000000..cdabde668a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/container/containerheader/tagHelper @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/ports/automaticPort/AutoPort.cs b/ej2-asp-core-mvc/code-snippet/diagram/ports/automaticPort/AutoPort.cs new file mode 100644 index 0000000000..ebf631b090 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/ports/automaticPort/AutoPort.cs @@ -0,0 +1,49 @@ +using System; +using System.Collections.Generic; +using System.Web.Mvc; +using Syncfusion.EJ2.Diagrams; + +namespace EJ2MVCSampleBrowser.Controllers.Diagram +{ + public partial class DiagramController : Controller + { + public ActionResult AutoPort() + { + List nodes = new List(); + nodes.Add(new Node() + { + Id = "node1", + Width = 100, + Height = 100, + Style = new NodeStyleNodes() + { + Fill = "cornflowerblue", + }, + text = "node1", + OffsetX = 150, + OffsetY = 200, + Constraints = NodeConstraints.Default & ~(NodeConstraints.InConnect | NodeConstraints.OutConnect) + }); + nodes.Add(new Node() + { + Id = "node2", + Width = 100, + Height = 100, + Style = new NodeStyleNodes() + { + Fill = "cornflowerblue", + }, + text = "node2", + OffsetX = 400, + OffsetY = 200, + Constraints = NodeConstraints.Default & ~(NodeConstraints.InConnect | NodeConstraints.OutConnect) + }); + ViewData.nodes = nodes; + return View(); + } + } + public class Node : DiagramNode + { + public string text; + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/ports/automaticPort/razor b/ej2-asp-core-mvc/code-snippet/diagram/ports/automaticPort/razor new file mode 100644 index 0000000000..8d68b74ffc --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/ports/automaticPort/razor @@ -0,0 +1,7 @@ +@Syncfusion.EJ2.Diagrams; + +@(Html.EJS().Diagram("container").Width("100%").Height("500px") + .SnapSettings(s => s.Constraints(SnapConstraints.None)) + .Nodes((List)ViewData["nodes"]) + .Constraints(DiagramConstraints.Default | DiagramConstraints.AutomaticPortCreation).Render() +) \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/ports/automaticPort/tagHelper b/ej2-asp-core-mvc/code-snippet/diagram/ports/automaticPort/tagHelper new file mode 100644 index 0000000000..a72244b28a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/ports/automaticPort/tagHelper @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/activations/razor b/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/activations/razor new file mode 100644 index 0000000000..6a47595ff8 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/activations/razor @@ -0,0 +1,7 @@ +@Syncfusion.EJ2.Diagrams; + +@(Html.EJS().Diagram("container").Width("100%").Height("600px") + .SnapSettings(s => s.Constraints(SnapConstraints.None)) + .Model((DiagramModel)ViewData["model"]) + .Render() +) \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/activations/tagHelper b/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/activations/tagHelper new file mode 100644 index 0000000000..ad47428946 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/activations/tagHelper @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/activations/umlseq.cs b/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/activations/umlseq.cs new file mode 100644 index 0000000000..76376a0786 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/activations/umlseq.cs @@ -0,0 +1,72 @@ +using System; +using System.Collections.Generic; +using System.Web.Mvc; +using Syncfusion.EJ2.Diagrams; + +namespace EJ2MVCSampleBrowser.Controllers.Diagram +{ + public partial class DiagramController : Controller + { + // This method sets up and returns a view for the UML Sequence Diagram + public ActionResult Model() + { + // Create a new UML Sequence Diagram model + var model = new DiagramUmlSequenceDiagram + { + // Define the participants involved in the sequence diagram + Participants = new List + { + // Define the "User" as a participant, marked as an actor + new DiagramUmlSequenceParticipant + { + Id = "User", + Content = "User", + IsActor = true + }, + // Define the "System" as a non-actor participant with a destruction marker + new DiagramUmlSequenceParticipant + { + Id = "System", + Content = "System", + IsActor = false, + ShowDestructionMarker = true, + // Define activation boxes for the system + ActivationBoxes = new List + { + new DiagramUmlSequenceActivationBox + { + Id = "ActSystem", // Identifier for the activation box + StartMessageID = "MSG1", // Message that starts the activation + EndMessageID = "MSG2" // Message that ends the activation + } + } + } + }, + // Define the messages exchanged between these participants + Messages = new List + { + new DiagramUmlSequenceMessage + { + Id = "MSG1", + Content = "Login Request", + FromParticipantID = "User", // Sender of the message + ToParticipantID = "System", // Receiver of the message + Type = UmlSequenceMessageType.Synchronous // Type of the message + }, + new DiagramUmlSequenceMessage + { + Id = "MSG2", + Content = "Login Response", + FromParticipantID = "System", + ToParticipantID = "User", + Type = UmlSequenceMessageType.Reply // Reply type indicating a response + } + } + }; + + // Pass the UML sequence diagram model to the view for rendering + ViewData.model = model; + return View(); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/fragments/razor b/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/fragments/razor new file mode 100644 index 0000000000..48d59db7b1 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/fragments/razor @@ -0,0 +1,7 @@ +@Syncfusion.EJ2.Diagrams; + +@(Html.EJS().Diagram("container").Width("100%").Height("700px") + .SnapSettings(s => s.Constraints(SnapConstraints.None)) + .Model((DiagramModel)ViewData["model"]) + .Render() +) \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/fragments/tagHelper b/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/fragments/tagHelper new file mode 100644 index 0000000000..25dae2b3a7 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/fragments/tagHelper @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/fragments/umlseq.cs b/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/fragments/umlseq.cs new file mode 100644 index 0000000000..2b38049bd5 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/fragments/umlseq.cs @@ -0,0 +1,95 @@ +using System; +using System.Collections.Generic; +using System.Web.Mvc; +using Syncfusion.EJ2.Diagrams; + +namespace EJ2MVCSampleBrowser.Controllers.Diagram +{ + public partial class DiagramController : Controller + { + // This method constructs a UML Sequence Diagram model and passes it to the view + public ActionResult Model() + { + // Define the UML Sequence Diagram model with space between participants + var model = new DiagramUmlSequenceDiagram + { + SpaceBetweenParticipants = 300, // Space between the participants in the diagram + + // Define the participants involved in the diagram + Participants = new List + { + new DiagramUmlSequenceParticipant { Id = "Customer", Content = "Customer", IsActor = true }, + new DiagramUmlSequenceParticipant { Id = "OrderSystem", Content = "Order System", IsActor = false }, + new DiagramUmlSequenceParticipant { Id = "PaymentGateway", Content = "Payment Gateway", IsActor = false } + }, + + // Define the messages exchanged between participants + Messages = new List + { + new DiagramUmlSequenceMessage { Id = "MSG1", Content = "Place Order", FromParticipantID = "Customer", ToParticipantID = "OrderSystem", Type = UmlSequenceMessageType.Synchronous }, + new DiagramUmlSequenceMessage { Id = "MSG2", Content = "Check Stock Availability", FromParticipantID = "OrderSystem", ToParticipantID = "OrderSystem", Type = UmlSequenceMessageType.Synchronous }, + new DiagramUmlSequenceMessage { Id = "MSG3", Content = "Stock Available", FromParticipantID = "OrderSystem", ToParticipantID = "Customer", Type = UmlSequenceMessageType.Reply }, + new DiagramUmlSequenceMessage { Id = "MSG4", Content = "Process Payment", FromParticipantID = "OrderSystem", ToParticipantID = "PaymentGateway", Type = UmlSequenceMessageType.Synchronous }, + new DiagramUmlSequenceMessage { Id = "MSG5", Content = "Payment Successful", FromParticipantID = "PaymentGateway", ToParticipantID = "OrderSystem", Type = UmlSequenceMessageType.Reply }, + new DiagramUmlSequenceMessage { Id = "MSG6", Content = "Order Confirmed and Shipped", FromParticipantID = "OrderSystem", ToParticipantID = "Customer", Type = UmlSequenceMessageType.Reply }, + new DiagramUmlSequenceMessage { Id = "MSG7", Content = "Payment Failed", FromParticipantID = "PaymentGateway", ToParticipantID = "OrderSystem", Type = UmlSequenceMessageType.Reply }, + new DiagramUmlSequenceMessage { Id = "MSG8", Content = "Retry Payment", FromParticipantID = "OrderSystem", ToParticipantID = "Customer", Type = UmlSequenceMessageType.Reply } + }, + + // Define fragments to provide conditional visual representations + Fragments = new List + { + new DiagramUmlSequenceFragment + { + Id = 1, + Type = UmlSequenceFragmentType.Optional, // Represents an optional fragment + Conditions = new List + { + new DiagramUmlSequenceFragmentCondition + { + Content = "if item is in stock", // Condition for the fragment + MessageIds = new List { "MSG4" } + } + } + }, + new DiagramUmlSequenceFragment + { + Id = 2, + Type = UmlSequenceFragmentType.Alternative, // Represents an alternative fragment with conditions + Conditions = new List + { + new DiagramUmlSequenceFragmentCondition + { + Content = "if payment is successful", + MessageIds = new List { "MSG5", "MSG6" } + }, + new DiagramUmlSequenceFragmentCondition + { + Content = "if payment fails", + MessageIds = new List { "MSG7", "MSG8" } + } + } + }, + // Parent Fragment + new DiagramUmlSequenceFragment + { + Id = 3, + Type = UmlSequenceFragmentType.Loop, // Represents a loop fragment + Conditions = new List + { + new DiagramUmlSequenceFragmentCondition + { + Content = "while attempts less than 3", + FragmentIds = new List { 1, 2 } // Nested fragments + } + } + } + } + }; + + // Pass the diagram model to the view for rendering + ViewData.model = model; + return View(); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/messages/razor b/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/messages/razor new file mode 100644 index 0000000000..48d59db7b1 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/messages/razor @@ -0,0 +1,7 @@ +@Syncfusion.EJ2.Diagrams; + +@(Html.EJS().Diagram("container").Width("100%").Height("700px") + .SnapSettings(s => s.Constraints(SnapConstraints.None)) + .Model((DiagramModel)ViewData["model"]) + .Render() +) \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/messages/tagHelper b/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/messages/tagHelper new file mode 100644 index 0000000000..25dae2b3a7 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/messages/tagHelper @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/messages/umlseq.cs b/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/messages/umlseq.cs new file mode 100644 index 0000000000..2e087d0886 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/messages/umlseq.cs @@ -0,0 +1,104 @@ +using System; +using System.Collections.Generic; +using System.Web.Mvc; +using Syncfusion.EJ2.Diagrams; + +namespace EJ2MVCSampleBrowser.Controllers.Diagram +{ + public partial class DiagramController : Controller + { + public ActionResult Model() + { + // Create a new UML Sequence Diagram model + var model = new DiagramUmlSequenceDiagram + { + // Define the participants involved in the sequence diagram + Participants = new List + { + new DiagramUmlSequenceParticipant + { + Id = "User", + Content = "User", + IsActor = true // Indicates this participant is an actor + }, + new DiagramUmlSequenceParticipant + { + Id = "System", + Content = "System", + IsActor = false, + ShowDestructionMarker = true // Shows a destruction marker in the diagram + }, + new DiagramUmlSequenceParticipant + { + Id = "Logger", + Content = "Logger", + IsActor = false, + ShowDestructionMarker = true + }, + new DiagramUmlSequenceParticipant + { + Id = "SessionManager", + Content = "SessionManager", + IsActor = false + } + }, + // Define the messages exchanged between these participants + Messages = new List + { + new DiagramUmlSequenceMessage + { + Id = "MSG1", + Content = "Login Request", + FromParticipantID = "User", // The sender of the message + ToParticipantID = "System", // The receiver of the message + Type = UmlSequenceMessageType.Synchronous // Message type indicating a synchronous operation + }, + new DiagramUmlSequenceMessage + { + Id = "MSG2", + Content = "Login Response", + FromParticipantID = "System", + ToParticipantID = "User", + Type = UmlSequenceMessageType.Reply + }, + new DiagramUmlSequenceMessage + { + Id = "MSG3", + Content = "Log Event", + FromParticipantID = "System", + ToParticipantID = "Logger", + Type = UmlSequenceMessageType.Asynchronous // Message type indicating an asynchronous operation + }, + new DiagramUmlSequenceMessage + { + Id = "MSG4", + Content = "Create Session", + FromParticipantID = "System", + ToParticipantID = "SessionManager", + Type = UmlSequenceMessageType.Create // Message type indicating creation of a session + }, + new DiagramUmlSequenceMessage + { + Id = "MSG5", + Content = "Delete Session", + FromParticipantID = "System", + ToParticipantID = "SessionManager", + Type = UmlSequenceMessageType.Delete // Message type indicating deletion of a session + }, + new DiagramUmlSequenceMessage + { + Id = "MSG6", + Content = "Validate Inputs", + FromParticipantID = "System", + ToParticipantID = "System", // Message directed to the same participant (self-message) + Type = UmlSequenceMessageType.Self // Message type indicating a self-message + } + } + }; + + // Pass the UML sequence diagram model to the view + ViewData.model = model; + return View(); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/participants/razor b/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/participants/razor new file mode 100644 index 0000000000..6a47595ff8 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/participants/razor @@ -0,0 +1,7 @@ +@Syncfusion.EJ2.Diagrams; + +@(Html.EJS().Diagram("container").Width("100%").Height("600px") + .SnapSettings(s => s.Constraints(SnapConstraints.None)) + .Model((DiagramModel)ViewData["model"]) + .Render() +) \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/participants/tagHelper b/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/participants/tagHelper new file mode 100644 index 0000000000..ad47428946 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/participants/tagHelper @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/participants/umlseq.cs b/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/participants/umlseq.cs new file mode 100644 index 0000000000..42132cc565 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/umlsequencediagram/participants/umlseq.cs @@ -0,0 +1,37 @@ +using System; +using System.Collections.Generic; +using System.Web.Mvc; +using Syncfusion.EJ2.Diagrams; +namespace EJ2MVCSampleBrowser.Controllers.Diagram +{ + public partial class DiagramController : Controller + { + public ActionResult Model() + { + // Define the model correctly + var model = new DiagramUmlSequenceDiagram + { + // Define the participants involved in the UML Sequence Diagram + participants = new List + { + new DiagramUmlSequenceParticipant + { + Id = "User", // Unique identifier for the participant + Content = "User", // Label or name of the participant + IsActor = true // Indicates that the participant is an actor + }, + new DiagramUmlSequenceParticipant + { + Id = "System", // Unique identifier for the participant + Content = "System", // Label or name of the participant + IsActor = false, + ShowDestructionMarker = true // Flag to show destruction marker at the end of the lifeline + } + } + }; + + ViewData.model = model; + return View(); + } + } +} diff --git a/ej2-asp-core-mvc/code-snippet/dropdownlist/filtering/arrayofstrings/arrayofstrings.cs b/ej2-asp-core-mvc/code-snippet/dropdownlist/filtering/arrayofstrings/arrayofstrings.cs new file mode 100644 index 0000000000..18fc9acd84 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/dropdownlist/filtering/arrayofstrings/arrayofstrings.cs @@ -0,0 +1,18 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Threading.Tasks; +using Microsoft.AspNetCore.Mvc; +using WebApplication1.Models; + +namespace WebApplication1.Controllers +{ + public class DropDownListController : Controller + { + public ActionResult arrayofstrings() + { + ViewBag.data = new string[] { "Badminton", "Basketball", "Cricket", "Football", "Golf", "Gymnastics", "Hockey", "Tennis" }; + return View(); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/dropdownlist/filtering/arrayofstrings/razor b/ej2-asp-core-mvc/code-snippet/dropdownlist/filtering/arrayofstrings/razor new file mode 100644 index 0000000000..8b5facf674 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/dropdownlist/filtering/arrayofstrings/razor @@ -0,0 +1 @@ +@Html.EJS().DropDownList("games").Placeholder("Select a game").PopupHeight("200px").DataSource((IEnumerable)ViewBag.data).DebounceDelay(300).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/dropdownlist/filtering/arrayofstrings/tagHelper b/ej2-asp-core-mvc/code-snippet/dropdownlist/filtering/arrayofstrings/tagHelper new file mode 100644 index 0000000000..032bfe529b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/dropdownlist/filtering/arrayofstrings/tagHelper @@ -0,0 +1,6 @@ +
+
+ + +
+
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/gantt/timeline/showWeekend/razor b/ej2-asp-core-mvc/code-snippet/gantt/timeline/showWeekend/razor new file mode 100644 index 0000000000..15df7f7a09 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/gantt/timeline/showWeekend/razor @@ -0,0 +1,4 @@ + + @Html.EJS().Gantt("Gantt").DataSource((IEnumerable)ViewBag.DataSource).Height("450px").TaskFields(ts => ts.Id("TaskId").Name( + "TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks") + ).TimelineSettings(tl => tl.ShowWeekend(false)).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/gantt/timeline/showWeekend/showWeekend.cs b/ej2-asp-core-mvc/code-snippet/gantt/timeline/showWeekend/showWeekend.cs new file mode 100644 index 0000000000..69107314b9 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/gantt/timeline/showWeekend/showWeekend.cs @@ -0,0 +1,89 @@ +public IActionResult Index() +{ + ViewBag.DataSource = ganttData(); + return View(); +} + + public static List ganttData() + { + List GanttDataSourceCollection = new List(); + + GanttDataSource Record1 = new GanttDataSource() + { + TaskId = 1, + TaskName = "Project initiation", + StartDate = new DateTime(2019, 04, 02), + EndDate = new DateTime(2019, 04, 21), + SubTasks = new List(), + }; + GanttDataSource Child1 = new GanttDataSource() + { + TaskId = 2, + TaskName = "Identify site location", + StartDate = new DateTime(2019, 04, 02), + Duration = 5, + Progress = 70, + }; + GanttDataSource Child2 = new GanttDataSource() + { + TaskId = 3, + TaskName = "Perform soil test", + StartDate = new DateTime(2019, 04, 02), + Duration = 5, + Progress = 50, + }; + GanttDataSource Child3 = new GanttDataSource() + { + TaskId = 4, + TaskName = "Soil test approval", + StartDate = new DateTime(2019, 04, 02), + Duration = 5, + Progress = 50, + + }; + Record1.SubTasks.Add(Child1); + Record1.SubTasks.Add(Child2); + Record1.SubTasks.Add(Child3); + + GanttDataSource Record2 = new GanttDataSource() + { + TaskId = 5, + TaskName = "Project estimation", + StartDate = new DateTime(2019, 04, 02), + EndDate = new DateTime(2019, 04, 21), + SubTasks = new List(), + }; + GanttDataSource Child4 = new GanttDataSource() + { + TaskId = 6, + TaskName = "Develop floor plan for estimation", + StartDate = new DateTime(2019, 04, 02, 8, 10, 0), + Duration = 5, + Progress = 70, + }; + GanttDataSource Child5 = new GanttDataSource() + { + TaskId = 7, + TaskName = "List materials", + StartDate = new DateTime(2019, 04, 02, 8, 10, 0), + Duration = 5, + Progress = 50, + }; + Record2.SubTasks.Add(Child4); + Record2.SubTasks.Add(Child5); + + GanttDataSourceCollection.Add(Record1); + GanttDataSourceCollection.Add(Record2); + + return GanttDataSourceCollection; + } + public class GanttDataSource + { + public int TaskId { get; set; } + public string TaskName { get; set; } + public DateTime StartDate { get; set; } + public DateTime EndDate { get; set; } + public int? Duration { get; set; } + public int Progress { get; set; } + public List SubTasks { get; set; } + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/gantt/timeline/showWeekend/tagHelper b/ej2-asp-core-mvc/code-snippet/gantt/timeline/showWeekend/tagHelper new file mode 100644 index 0000000000..a05bffc8f2 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/gantt/timeline/showWeekend/tagHelper @@ -0,0 +1,7 @@ + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multiselect/filtering/arrayofstrings/arrayofstrings.cs b/ej2-asp-core-mvc/code-snippet/multiselect/filtering/arrayofstrings/arrayofstrings.cs new file mode 100644 index 0000000000..e6f79a6ca1 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multiselect/filtering/arrayofstrings/arrayofstrings.cs @@ -0,0 +1,18 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Threading.Tasks; +using Microsoft.AspNetCore.Mvc; +using WebApplication1.Models; + +namespace WebApplication1.Controllers +{ + public class MultiSelectController : Controller + { + public ActionResult arrayofstrings() + { + ViewBag.data = new string[] { "Badminton", "Basketball", "Cricket", "Football", "Golf", "Gymnastics", "Hockey", "Tennis" }; + return View(); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multiselect/filtering/arrayofstrings/razor b/ej2-asp-core-mvc/code-snippet/multiselect/filtering/arrayofstrings/razor new file mode 100644 index 0000000000..3f2763a5eb --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multiselect/filtering/arrayofstrings/razor @@ -0,0 +1 @@ +@Html.EJS().MultiSelect("default").Placeholder("Select games").DataSource((IEnumerable)ViewBag.data).DebounceDelay(300).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/multiselect/filtering/arrayofstrings/tagHelper b/ej2-asp-core-mvc/code-snippet/multiselect/filtering/arrayofstrings/tagHelper new file mode 100644 index 0000000000..b74c90d60a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/multiselect/filtering/arrayofstrings/tagHelper @@ -0,0 +1,4 @@ +
+ + +
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/tree-grid/scrolling/scrolling-sticky-header/razor b/ej2-asp-core-mvc/code-snippet/tree-grid/scrolling/scrolling-sticky-header/razor new file mode 100644 index 0000000000..1e5ec4ae52 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/tree-grid/scrolling/scrolling-sticky-header/razor @@ -0,0 +1,22 @@ +
+
+ + @Html.EJS().Switch("switch").Change("toggleStickyHeader").Render() +
+
+ @(Html.EJS().TreeGrid("TreeGrid").DataSource((IEnumerable)ViewBag.datasource).Height("100%").Columns(col => + { + col.Field("TaskId").HeaderText("Task ID").Width(90).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("TaskName").HeaderText("Task Name").Width(180).Add(); + col.Field("StartDate").HeaderText("Start Date").Format("yMd").Type("date").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(120).Add(); + col.Field("Duration").HeaderText("Duration").Width(110).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + }).ChildMapping("Children").TreeColumnIndex(1).EnableStickyHeader(true).Render()) + + + + diff --git a/ej2-asp-core-mvc/code-snippet/tree-grid/scrolling/scrolling-sticky-header/sticky-header.cs b/ej2-asp-core-mvc/code-snippet/tree-grid/scrolling/scrolling-sticky-header/sticky-header.cs new file mode 100644 index 0000000000..a41f3a4b92 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/tree-grid/scrolling/scrolling-sticky-header/sticky-header.cs @@ -0,0 +1,6 @@ +public IActionResult Index() +{ + var tree = TreeGridItems.GetTreeData(); + ViewBag.datasource = tree; + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/tree-grid/scrolling/scrolling-sticky-header/tagHelper b/ej2-asp-core-mvc/code-snippet/tree-grid/scrolling/scrolling-sticky-header/tagHelper new file mode 100644 index 0000000000..160634554e --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/tree-grid/scrolling/scrolling-sticky-header/tagHelper @@ -0,0 +1,24 @@ + +
+
+ + +
+
+ + + + + + + + +
+
+ + diff --git a/ej2-asp-core-mvc/combo-box/filtering.md b/ej2-asp-core-mvc/combo-box/filtering.md index b3d503a22e..c529e81cb2 100644 --- a/ej2-asp-core-mvc/combo-box/filtering.md +++ b/ej2-asp-core-mvc/combo-box/filtering.md @@ -150,6 +150,30 @@ ComboBox supports diacritics filtering which will ignore the [diacritics](https: {% endtabs %} {% endif %} +## Debounce delay + +You can use the [debounceDelay](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.dropdowns.combobox.html#Syncfusion_EJ2_DropDowns_ComboBox_DebounceDelay) property for filtering, enabling you to set a delay in milliseconds. This functionality helps reduce the frequency of filtering as you type, enhancing performance and responsiveness for a smoother user experience.By default, a DebounceDelay of 300ms is set. If you wish to disable this feature entirely, you can set it to 0ms. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/combobox/filtering/arrayofstrings/tagHelper %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/combobox/filtering/arrayofstrings/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Arrayofstrings.cs" %} +{% include code-snippet/combobox/filtering/arrayofstrings/arrayofstrings.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + N> [View Sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-Core-UG-Examples/tree/main/ComboBox/FilteringUGSample). ## See also diff --git a/ej2-asp-core-mvc/daterangepicker/date-format.md b/ej2-asp-core-mvc/daterangepicker/date-format.md new file mode 100644 index 0000000000..b3d59efd25 --- /dev/null +++ b/ej2-asp-core-mvc/daterangepicker/date-format.md @@ -0,0 +1,76 @@ +--- +layout: post +title: Date Format in ##Platform_Name## Daterangepicker Component | Syncfusion +description: Learn here all about Date Format in Syncfusion ##Platform_Name## Daterangepicker component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Date Format +publishingplatform: ##Platform_Name## +documentation: ug +--- + + +# Date Format in Syncfusion® Daterangepicker Component + +Date format is a way of representing the date value in different string format in textbox. + +By default the DateRangePicker's format is based on the culture. You can also set the own custom format by using the [format](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.calendars.daterangepicker.html#Syncfusion_EJ2_Calendars_DateRangePicker_Format) property. + +N> Once the date format property has been defined, it will be common to all the cultures. + +To know more about the date format standards, refer to the [`Internationalization Date Format`](https://ej2.syncfusion.com/aspnetcore/documentation/daterangepicker/globalization) section. + +The following example demonstrates the DateRangePicker with the custom format (`dd/MMM/yy hh:mm a`). + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/daterangepicker/date-format/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Date-format.cs" %} +{% include code-snippet/daterangepicker/date-format/date-format.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/daterangepicker/date-format/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Date-format.cs" %} +{% include code-snippet/daterangepicker/date-format/date-format.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Input formats + +The [`inputFormats`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.calendars.daterangepicker.html#properties) property in the DateRangePicker control allows users to enter dates in various formats, providing flexibility in date entry. This property accepts an array of predefined formats that the control recognizes, enabling users to input dates in different ways while ensuring they are parsed correctly. + +When the user types the date in any of the specified input formats, it will be automatically converted to the display format after pressing Enter, the Tab key, or when the input loses focus. This enhances the user experience by allowing intuitive data entry through various custom input formats. + +The following example demonstrates the DateRangePicker with multiple input formats. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/daterangepicker/input-format/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Date-format.cs" %} +{% include code-snippet/daterangepicker/input-format/input-format.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/daterangepicker/input-format/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Date-format.cs" %} +{% include code-snippet/daterangepicker/input-format/input-format.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} diff --git a/ej2-asp-core-mvc/diagram/container.md b/ej2-asp-core-mvc/diagram/container.md new file mode 100644 index 0000000000..8eaf960e47 --- /dev/null +++ b/ej2-asp-core-mvc/diagram/container.md @@ -0,0 +1,105 @@ +--- +layout: post +title: Container in ##Platform_Name## Diagram Component | Syncfusion® +description: Learn here all about Container in Syncfusion® ##Platform_Name## Diagram component of Syncfusion Essential® JS 2 and more. +platform: ej2-asp-core-mvc +control: Container +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Container in ##Platform_Name## Diagram Component + +A Container is a group of logically related shapes surrounded by a visible boundary. Shapes can be added or removed from the container at runtime. Changes made to the container do not affect its child elements, which can be individually selected, moved, or edited. + +## Create Container + +### Add a Container + +The following code illustrates how to create a container node. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/diagram/container/basiccontainer/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Container.cs" %} +{% include code-snippet/diagram/container/basiccontainer/Container.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/diagram/container/basiccontainer/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Container.cs" %} +{% include code-snippet/diagram/container/basiccontainer/Container.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +![container](./images/container.png) + +### Setting a Header + +You can provide a textual description for a container using its `Header` property. Also, users can customize the header's appearance using the header's [Style](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramHeader.html#Syncfusion_EJ2_Diagrams_DiagramHeader_Style) property. + +The following code example explains how to define a container header and its customization: + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/diagram/container/containerheader/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Container.cs" %} +{% include code-snippet/diagram/container/containerheader/Container.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/diagram/container/containerheader/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Container.cs" %} +{% include code-snippet/diagram/container/containerheader/Container.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +![container header customization](./images/containerheader.png) + +N> You can edit the header by double-clicking the region of the container's header. + +### Container from symbol palette + +Container nodes can be preconfigured and added to the symbol palette. Users can drag and drop these container nodes into the diagram as needed. + +To learn more, refer to the [Symbol Palette](./symbol-palette) documentation. + +## Interactively add or remove diagram elements into Container + +You can interactively add or remove diagram elements from the Container in the runtime. When a diagram element is dropped near the container's edge, the container automatically resizes to accommodate it. + +![Container](gifs/container.gif) + +## Interaction + +Containers support the same interactions as regular nodes—such as selection, dragging, resizing, and rotating. For more information refer to the [`nodes interactions`](./nodes) + +## Events + +The events triggered when interacting with container nodes are similar to those for individual nodes. For more information, refer to the [`nodes events`](./nodes) + +## See Also + +* [How to add nodes to the symbol palette](./symbol-palette) +* [How to customize nodes](./nodes) +* [How to add ports to the node](./ports) +* [How to enable/disable the behavior of the node](./constraints) +* [How to create diagram nodes using drawing tools](./tools) diff --git a/ej2-asp-core-mvc/diagram/gifs/autoport.gif b/ej2-asp-core-mvc/diagram/gifs/autoport.gif new file mode 100644 index 0000000000..9bce8bbcfc Binary files /dev/null and b/ej2-asp-core-mvc/diagram/gifs/autoport.gif differ diff --git a/ej2-asp-core-mvc/diagram/gifs/container.gif b/ej2-asp-core-mvc/diagram/gifs/container.gif new file mode 100644 index 0000000000..2800871e1e Binary files /dev/null and b/ej2-asp-core-mvc/diagram/gifs/container.gif differ diff --git a/ej2-asp-core-mvc/diagram/gifs/negativeaxis.gif b/ej2-asp-core-mvc/diagram/gifs/negativeaxis.gif new file mode 100644 index 0000000000..71962aff3e Binary files /dev/null and b/ej2-asp-core-mvc/diagram/gifs/negativeaxis.gif differ diff --git a/ej2-asp-core-mvc/diagram/images/container.png b/ej2-asp-core-mvc/diagram/images/container.png new file mode 100644 index 0000000000..4a8fb9b41a Binary files /dev/null and b/ej2-asp-core-mvc/diagram/images/container.png differ diff --git a/ej2-asp-core-mvc/diagram/images/containerheader.png b/ej2-asp-core-mvc/diagram/images/containerheader.png new file mode 100644 index 0000000000..443dbbb230 Binary files /dev/null and b/ej2-asp-core-mvc/diagram/images/containerheader.png differ diff --git a/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/AltFragment.png b/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/AltFragment.png new file mode 100644 index 0000000000..467c31c93d Binary files /dev/null and b/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/AltFragment.png differ diff --git a/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/Asynchronous.png b/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/Asynchronous.png new file mode 100644 index 0000000000..b56c4e3467 Binary files /dev/null and b/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/Asynchronous.png differ diff --git a/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/Create.png b/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/Create.png new file mode 100644 index 0000000000..843d1289fc Binary files /dev/null and b/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/Create.png differ diff --git a/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/Delete.png b/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/Delete.png new file mode 100644 index 0000000000..aeadb14f17 Binary files /dev/null and b/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/Delete.png differ diff --git a/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/LoopFragment.png b/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/LoopFragment.png new file mode 100644 index 0000000000..86ebbc33c1 Binary files /dev/null and b/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/LoopFragment.png differ diff --git a/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/OptFragment.png b/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/OptFragment.png new file mode 100644 index 0000000000..6dacf2f54b Binary files /dev/null and b/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/OptFragment.png differ diff --git a/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/Participant.png b/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/Participant.png new file mode 100644 index 0000000000..4a6e1133a5 Binary files /dev/null and b/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/Participant.png differ diff --git a/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/Participants.png b/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/Participants.png new file mode 100644 index 0000000000..5ae99462d4 Binary files /dev/null and b/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/Participants.png differ diff --git a/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/Reply.png b/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/Reply.png new file mode 100644 index 0000000000..f0df0cb659 Binary files /dev/null and b/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/Reply.png differ diff --git a/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/Self.png b/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/Self.png new file mode 100644 index 0000000000..39ab7151d9 Binary files /dev/null and b/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/Self.png differ diff --git a/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/Synchronous.png b/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/Synchronous.png new file mode 100644 index 0000000000..e69dfe916b Binary files /dev/null and b/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/Synchronous.png differ diff --git a/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/activations.png b/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/activations.png new file mode 100644 index 0000000000..e43fd5794c Binary files /dev/null and b/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/activations.png differ diff --git a/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/fragment.png b/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/fragment.png new file mode 100644 index 0000000000..577719951d Binary files /dev/null and b/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/fragment.png differ diff --git a/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/msg.png b/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/msg.png new file mode 100644 index 0000000000..7e5c3de9e7 Binary files /dev/null and b/ej2-asp-core-mvc/diagram/images/umlsequencediagrams/msg.png differ diff --git a/ej2-asp-core-mvc/diagram/interaction/drag-resize-rotate.md b/ej2-asp-core-mvc/diagram/interaction/drag-resize-rotate.md index cf2a3eab61..820421dea9 100644 --- a/ej2-asp-core-mvc/diagram/interaction/drag-resize-rotate.md +++ b/ej2-asp-core-mvc/diagram/interaction/drag-resize-rotate.md @@ -59,4 +59,25 @@ You can change the size of the node resize thumb and the connector end point han * The node is rotated with reference to the static pivot point. * Pivot thumb (thumb at the middle of the node) appears while rotating the node to represent the static point. -![Rotate](../images/rotate.gif) \ No newline at end of file +![Rotate](../images/rotate.gif) + +## Restrict Interaction in Negative Axis Area + +The Diagram component includes a built-in option to restrict user interactions within the negative axis region—areas defined by negative X or Y coordinates. By enabling the `RestrictNegativeAxisDragDrop` constraint, the following interactions are prevented: + +* **Dragging**: Diagram elements cannot be dragged into areas with negative coordinates. +* **Resizing**: The size of diagram objects cannot be adjusted to extend into the negative axis. +* **Dropping Symbols**: Symbols from the palette cannot be dropped in the negative region. + +```html + + + +``` + +![Negative axis restrict](../gifs/negativeaxis.gif) + +N> A symbol dragged from the palette will only be added to the diagram if it’s fully positioned within the positive coordinate space. \ No newline at end of file diff --git a/ej2-asp-core-mvc/diagram/ports.md b/ej2-asp-core-mvc/diagram/ports.md index 22baf6fcec..4debcc10f0 100644 --- a/ej2-asp-core-mvc/diagram/ports.md +++ b/ej2-asp-core-mvc/diagram/ports.md @@ -270,3 +270,37 @@ var port= [{ ![maxSegmentThumb](images/connectionDirection.png) + + +## Automatic Port Creation + +The Diagram component allows you to dynamically create ports on nodes or connectors by clicking and dragging the mouse while holding the Control (Ctrl) key. This feature is disabled by default and can be enabled by using the `DiagramConstraints.AutomaticPortCreation` constraint. + +You can also remove a port using the same Ctrl + Click interaction, but only if the port is not currently connected to any connector. + +The following example shows how to enable automatic port creation: + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/diagram/ports/automaticPort/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Container.cs" %} +{% include code-snippet/diagram/ports/automaticPort/AutoPort.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/diagram/ports/automaticPort/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Container.cs" %} +{% include code-snippet/diagram/ports/automaticPort/AutoPort.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +![Automatic Port Creation](./gifs/autoport.gif) \ No newline at end of file diff --git a/ej2-asp-core-mvc/diagram/umlsequencediagram.md b/ej2-asp-core-mvc/diagram/umlsequencediagram.md new file mode 100644 index 0000000000..dc61136305 --- /dev/null +++ b/ej2-asp-core-mvc/diagram/umlsequencediagram.md @@ -0,0 +1,210 @@ +--- +layout: post +title: UmlSequenceDiagram in Syncfusion® ##Platform_Name## Diagram Component +description: Learn here all about UmlSequenceDiagram in Syncfusion® ##Platform_Name## Diagram component of Syncfusion Essential® JS 2 and more. +platform: ej2-asp-core-mvc +control: UmlSequenceDiagram +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# UML Sequence Diagram Model in Diagram + +A UML sequence diagram is an interaction diagram that demonstrates how objects interact with each other and the order of these interactions. The Syncfusion® diagram control provides comprehensive support for creating and visualizing UML sequence diagrams through the `UmlSequenceDiagramModel`. To enable this functionality, assign the `UmlSequenceDiagramModel` to the `Model` property of the diagram control. + +## UML Sequence Diagram Elements + +A sequence diagram contains several key elements, such as participants, messages, activation boxes, and fragments. Let's discuss how to implement these components using the diagram control. + +### Participants + +`UmlSequenceParticipantModel` in a sequence diagram represent the entities that interact with each other, appearing at the top of the diagram with lifelines extending vertically downward. + +#### UmlSequenceParticipantModel Properties + +| Property | Type | Description | +|---|---|---| +| id | string \| number | A unique identifier for the participant | +| content | string | The display text for the participant | +| isActor | boolean | Specifies whether the participant is displayed as an actor (true) or an object (false) | +| showDestructionMarker | boolean | Indicates whether a destruction marker (X) is shown at the end of the lifeline | +| activationBoxes | UmlSequenceActivationBoxModel[] | A collection of activation boxes associated with the participant | + +The following code example illustrates how to create participants. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/diagram/umlsequencediagram/participants/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Model.cs" %} +{% include code-snippet/diagram/umlsequencediagram/participants/umlseq.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/diagram/umlsequencediagram/participants/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Model.cs" %} +{% include code-snippet/diagram/umlsequencediagram/participants/umlseq.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +![participants](./images/umlsequencediagrams/Participants.png) + +### Messages + +`UmlSequenceMessageModel` represents communication between participants and are displayed as arrows connecting lifelines. + +#### Types of Messages + +| Message Type | Description | Example | +|---|---|---| +| Synchronous | The sender waits for a response | ![Synchronous Message](./images/umlsequencediagrams/Synchronous.png) | +| Asynchronous | The sender continues without waiting | ![Asynchronous Message](./images/umlsequencediagrams/Asynchronous.png) | +| Reply | A response to a previous message | ![Reply Message](./images/umlsequencediagrams/Reply.png) | +| Create | Creates a new participant | ![Create Message](./images/umlsequencediagrams/Create.png) | +| Delete | Terminates a participant | ![Delete Message](./images/umlsequencediagrams/Delete.png) | +| Self | A message from a participant to itself | ![Self Message](./images/umlsequencediagrams/Self.png) | + +#### UmlSequenceMessageModel Properties + +| Property | Type | Description | +|---|---|---| +| id | string \| number | A unique identifier for the message | +| content | string | The display text for the message | +| fromParticipantID | string \| number | ID of the participant sending the message | +| toParticipantID | string \| number | ID of the participant receiving the message | +| type | UmlSequenceMessageType | Type of the message (Synchronous, Asynchronous, Reply, Create, Delete, Self) | + +The following code example illustrates how to create messages: + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/diagram/umlsequencediagram/messages/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Model.cs" %} +{% include code-snippet/diagram/umlsequencediagram/messages/umlseq.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/diagram/umlsequencediagram/messages/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Model.cs" %} +{% include code-snippet/diagram/umlsequencediagram/messages/umlseq.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +![messages](./images/umlsequencediagrams/msg.png) + +### Activation Boxes + +`UmlSequenceActivationBoxModel` represents periods when a participant is active and processing a message. They appear as thin rectangles on participant lifelines. + +#### UmlSequenceActivationBoxModel Properties + +| Property | Type | Description | +|---|---|---| +| id | string \| number | A unique identifier for the activation box | +| startMessageID | string \| number | ID of the message that initiates the activation | +| endMessageID | string \| number | ID of the message that terminates the activation | + +The following code example illustrates how to create activation boxes. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/diagram/umlsequencediagram/activations/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Model.cs" %} +{% include code-snippet/diagram/umlsequencediagram/activations/umlseq.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/diagram/umlsequencediagram/activations/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Model.cs" %} +{% include code-snippet/diagram/umlsequencediagram/activations/umlseq.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +![activations](./images/umlsequencediagrams/activations.png) + +### Fragments + +`UmlSequenceFragmentModel` groups a set of messages based on specific conditions in a sequence diagram. They are displayed as rectangular enclosures that visually separate conditional or looping interactions. + +#### Types of Fragments + +The [UmlSequenceFragmentType](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.UmlSequenceFragmentType) enum defines the following fragment types: + +| Fragment Type | Description | Example | +|---------------|-------------|--------| +| Optional | Represents a sequence that is executed only if a specified condition is met; otherwise, it is skipped. | ![Optional Fragment](./images/umlsequencediagrams/OptFragment.png) | +| Alternative | Represents multiple conditional paths (if-else structure), where only one path executes based on the condition. | ![Alternative Fragment](./images/umlsequencediagrams/AltFragment.png) | +| Loop | Represents a repeating sequence of interactions that continues based on a loop condition. | ![Loop Fragment](./images/umlsequencediagrams/LoopFragment.png) | + +#### UmlSequenceFragmentModel Properties + +| Property | Type | Description | +|---|---|---| +| id | string \| number | A unique identifier for the fragment | +| type | UmlSequenceFragmentType | Type of the fragment (Optional, Loop, Alternative) | +| conditions | UmlSequenceFragmentConditionModel[] | Collection of conditions for the fragment | + +#### UmlSequenceFragmentConditionModel Properties + +| Property | Type | Description | +|---|---|---| +| content | string | Text describing the condition or parameter | +| messageIds | (string \| number)[] | Collection of message IDs included in this condition section | +| fragmentIds | string[] | Collection of nested fragments ids (for complex structures) | + +The following code example illustrates how to create fragments. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/diagram/umlsequencediagram/fragments/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Model.cs" %} +{% include code-snippet/diagram/umlsequencediagram/fragments/umlseq.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/diagram/umlsequencediagram/fragments/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Model.cs" %} +{% include code-snippet/diagram/umlsequencediagram/fragments/umlseq.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +![fragments](./images/umlsequencediagrams/fragment.png) + +### Customizing Participant Spacing in Sequence Diagram + +The `SpaceBetweenParticipants` property in `UmlSequenceDiagramModel` controls the horizontal spacing between participants. The default value is 100, and it can be adjusted based on your layout requirements. diff --git a/ej2-asp-core-mvc/drop-down-list/filtering.md b/ej2-asp-core-mvc/drop-down-list/filtering.md index 2c755233f2..d520c9e938 100644 --- a/ej2-asp-core-mvc/drop-down-list/filtering.md +++ b/ej2-asp-core-mvc/drop-down-list/filtering.md @@ -160,7 +160,32 @@ DropDownList supports diacritics filtering which will ignore the [diacritics](ht {% endtabs %} {% endif %} +## Debounce delay +You can use the [debounceDelay](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.dropdowns.dropdownlist.html#Syncfusion_EJ2_DropDowns_DropDownList_DebounceDelay) property for filtering, enabling you to set a delay in milliseconds. This functionality helps reduce the frequency of filtering as you type, enhancing performance and responsiveness for a smoother user experience.By default, a DebounceDelay of 300ms is set. If you wish to disable this feature entirely, you can set it to 0ms. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/dropdownlist/filtering/arrayofstrings/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Arrayofstrings.cs" %} +{% include code-snippet/dropdownlist/filtering/arrayofstrings/arrayofstrings.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/dropdownlist/filtering/arrayofstrings/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Arrayofstrings.cs" %} +{% include code-snippet/dropdownlist/filtering/arrayofstrings/arrayofstrings.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} ## See Also diff --git a/ej2-asp-core-mvc/gantt/scheduling-tasks.md b/ej2-asp-core-mvc/gantt/scheduling-tasks.md index d6e31106f6..dadd105f97 100644 --- a/ej2-asp-core-mvc/gantt/scheduling-tasks.md +++ b/ej2-asp-core-mvc/gantt/scheduling-tasks.md @@ -215,4 +215,5 @@ Non-working days/weekend are used to represent the non-productive days in a proj ![Alt text](images/changeWorkweek.png) N> By default, Saturdays and Sundays are considered as non-working days/weekend in a project. -
In the Gantt control, you can make weekend as working day by setting the [`IncludeWeekend`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Gantt.Gantt.html#Syncfusion_EJ2_Gantt_Gantt_IncludeWeekend) property to `true`. \ No newline at end of file +
In the Gantt control, you can make weekend as working day by setting the [`IncludeWeekend`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Gantt.Gantt.html#Syncfusion_EJ2_Gantt_Gantt_IncludeWeekend) property to `true`. +
To show or hide weekend in timeline, use [timelineSettings.showWeekend](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Gantt.GanttTimelineSettings.html#Syncfusion_EJ2_Gantt_GanttTimelineSettings_ShowWeekend) property in `timelineSettings`. To know more about `showWeekend`, refer [here](https://ej2.syncfusion.com/aspnetcore/documentation/gantt/time-line/time-line#showhide-weekends). \ No newline at end of file diff --git a/ej2-asp-core-mvc/gantt/time-line/time-line.md b/ej2-asp-core-mvc/gantt/time-line/time-line.md index f6e5c642b7..2b895fdcb0 100644 --- a/ej2-asp-core-mvc/gantt/time-line/time-line.md +++ b/ej2-asp-core-mvc/gantt/time-line/time-line.md @@ -210,6 +210,41 @@ In the Gantt control, you can enable or disable the mouse hover tooltip of timel ![Alt text](images/timelinecellTooltip.png) +## Show/hide weekends + +The [timelineSettings.showWeekend](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Gantt.GanttTimelineSettings.html#Syncfusion_EJ2_Gantt_GanttTimelineSettings_ShowWeekend) property is used to customize the timeline in the Gantt component by controlling the visibility of weekends. To exclude weekends from the timeline, set the `showWeekend` property to `false` in the `timelineSettings` configuration. This feature is particularly useful for focusing the timeline on working days, enhancing project management efficiency by hiding weekends from the view. + +>Note: To customize non-working or weekend days in the Gantt chart, refer to the [workWeek](https://ej2.syncfusion.com/aspnetcore/documentation/gantt/task-scheduling#weekendnon-working-days) documentation for detailed information. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/gantt/timeline/showWeekend/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="showWeekend.cs" %} +{% include code-snippet/gantt/timeline/showWeekend/showWeekend.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/gantt/timeline/showWeekend/razor %} +{% endhighlight %} +{% highlight c# tabtitle="showWeekend.cs" %} +{% include code-snippet/gantt/timeline/showWeekend/showWeekend.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +> Limitations +>* The `showWeekend` feature does not support baselines. +>* The `showWeekend` is not compatible with the manual task mode. +>* Non-working hours cannot be excluded when `showWeekend` is set to false. +>* Holidays are not excluded from the timeline if `showWeekend` is set to false. + ## Timeline template In the Gantt component, you can customize timeline cells using the [timelineTemplate](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Gantt.GanttTimelineTemplate.html) property, allowing for the customization of HTML content within timeline cells. This feature enhances the visual appeal and enables personalized functionality. diff --git a/ej2-asp-core-mvc/multi-select/filtering.md b/ej2-asp-core-mvc/multi-select/filtering.md index aa8798f8c4..4e5d5c139f 100644 --- a/ej2-asp-core-mvc/multi-select/filtering.md +++ b/ej2-asp-core-mvc/multi-select/filtering.md @@ -1,6 +1,6 @@ --- layout: post -title: Filtering in ##Platform_Name## Multi Select Component +title: Filtering in ##Platform_Name## Multi Select Component | Syncfusion description: Learn here all about Filtering in Syncfusion ##Platform_Name## Multi Select component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Filtering @@ -164,7 +164,32 @@ In the following sample,data with diacritics are bound as dataSource for MultiSe {% endtabs %} {% endif %} +## Debounce delay +You can use the [debounceDelay](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.dropdowns.multiselect.html#Syncfusion_EJ2_DropDowns_MultiSelect_DebounceDelay) property for filtering, enabling you to set a delay in milliseconds. This functionality helps reduce the frequency of filtering as you type, enhancing performance and responsiveness for a smoother user experience.By default, a DebounceDelay of 300ms is set. If you wish to disable this feature entirely, you can set it to 0ms. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/multiselect/filtering/arrayofstrings/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Arrayofstrings.cs" %} +{% include code-snippet/multiselect/filtering/arrayofstrings/arrayofstrings.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/multiselect/filtering/arrayofstrings/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Arrayofstrings.cs" %} +{% include code-snippet/multiselect/filtering/arrayofstrings/arrayofstrings.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} ## See Also diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/text-search.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/text-search.md index 03197515f3..06837e2abe 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/text-search.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/text-search.md @@ -29,6 +29,8 @@ The Text Search option in PDF Viewer is used to find and highlight the text cont ![Alt text](./images/search.png) +## Test search Features + ### Real time search suggestion while typing Entering text into the search input dynamically displays search suggestions based on the provided input. The suggestions are updated in real-time as text is typed, offering relevant matches from the available content. This feature enhances the search experience by allowing quick access to potential results while typing. diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/text-search.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/text-search.md index 93cb89ca26..9f004d1657 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/text-search.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/text-search.md @@ -40,6 +40,8 @@ The Text Search option in PDF Viewer is used to find and highlight the text cont ![Alt text](./images/search.png) +## Test search Features + ### Real time search suggestion while typing Entering text into the search input dynamically displays search suggestions based on the provided input. The suggestions are updated in real-time as text is typed, offering relevant matches from the available content. This feature enhances the search experience by allowing quick access to potential results while typing. diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/insert-images.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/insert-images.md index 950062f721..168aa65b8e 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/insert-images.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/insert-images.md @@ -252,7 +252,7 @@ You can allow the specific images alone to be uploaded using the the allowedType ``` cshtml - allowedTypes="@(new string[] {".jpg"})" + allowedTypes="@(new string[] {".jpg", ".png", ".jpeg" })" ``` diff --git a/ej2-asp-core-mvc/spreadsheet/images/fileSize_and_dataLimit.jpg b/ej2-asp-core-mvc/spreadsheet/images/fileSize_and_dataLimit.jpg new file mode 100644 index 0000000000..e3f49179ea Binary files /dev/null and b/ej2-asp-core-mvc/spreadsheet/images/fileSize_and_dataLimit.jpg differ diff --git a/ej2-asp-core-mvc/spreadsheet/performance-best-practices.md b/ej2-asp-core-mvc/spreadsheet/performance-best-practices.md new file mode 100644 index 0000000000..a15c3252a4 --- /dev/null +++ b/ej2-asp-core-mvc/spreadsheet/performance-best-practices.md @@ -0,0 +1,269 @@ +--- +layout: post +title: Performance Best Practices in ##Platform_Name## Syncfusion Spreadsheet Component +description: Learn here all about performance best practices in Syncfusion ##Platform_Name## Spreadsheet component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Performance +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Performance Best Practices in ##Platform_Name## Spreadsheet control + +{% if page.publishingplatform == "aspnet-core" %} + +Performance optimization is crucial when working with large datasets in the [Syncfusion® ASP.NET Core Spreadsheet](https://www.syncfusion.com/aspnet-core-ui-controls/spreadsheet). This documentation outlines best practices to enhance data handling efficiency and ensure a smooth, responsive user experience during various spreadsheet operations. + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +Performance optimization is crucial when working with large datasets in the [Syncfusion® ASP.NET MVC Spreadsheet](https://www.syncfusion.com/aspnet-mvc-ui-controls/spreadsheet). This documentation outlines best practices to enhance data handling efficiency and ensure a smooth, responsive user experience during various spreadsheet operations. + +{% endif %} + +## How to improve performance when opening Excel files in the Spreadsheet? + +### Virtual scrolling + +Virtual scrolling is an essential performance feature in the Spreadsheet that enhances rendering efficiency when handling large datasets. Instead of loading all rows and columns into the DOM at once, it renders only the cells visible within the viewport. As the user scrolls, additional rows or columns are dynamically loaded and rendered. + +This approach significantly reduces initial load time, DOM size, and memory usage — resulting in smoother rendering and interaction, especially when working with thousands of rows or columns. + +{% if page.publishingplatform == "aspnet-core" %} + +For more details, refer to the [virtual scrolling documentation](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/scrolling#virtual-scrolling). + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +For more details, refer to the [virtual scrolling documentation](https://ej2.syncfusion.com/aspnetmvc/documentation/spreadsheet/scrolling#virtual-scrolling). + +{% endif %} + +### Chunk response processing + +When opening large Excel files with extensive data and features, server responses can become too large—leading to memory issues or connection failures during transmission. The Chunk Response Processing feature addresses this by breaking the response into smaller chunks and sending them in parallel to the client. + +These chunks are combined on the client side to load the Excel data smoothly into the Spreadsheet. This approach avoids transmission failures due to memory constraints and ensures reliable and efficient loading of large files. + +{% if page.publishingplatform == "aspnet-core" %} + +To enable the chunk response processing feature, you can refer to the following UG section: +* [Chunk Response Processing](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/open-save#chunk-response-processing) + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +To enable the chunk response processing feature, you can refer to the following UG section: +* [Chunk Response Processing](https://ej2.syncfusion.com/aspnetmvc/documentation/spreadsheet/open-save#chunk-response-processing) + +{% endif %} + +### Configure JSON serialization options during open + +Serialization options in the Spreadsheet allows you to exclude specific features—such as styles, formats, charts, images, wrap, etc.—from the `Workbook JSON object` when opening it in the Spreadsheet using the `openFromJson` method. By skipping unnecessary features, you can significantly improve performance, especially when working with large or complex workbooks. + +This is particularly useful when: +* You need only the raw data without formatting. +* You're opening the `Workbook JSON object` in the Spreadsheet using the `openFromJson` method. +* You want to minimize the size of the JSON payload and optimize processing speed. + +Refer to the following UG section to learn how to configure these options: + +{% if page.publishingplatform == "aspnet-core" %} + +* [Configure JSON serialization options during open](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/open-save#configure-json-deserialization-options) + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +* [Configure JSON serialization options during open](https://ej2.syncfusion.com/aspnetmvc/documentation/spreadsheet/open-save#configure-json-deserialization-options) + +{% endif %} + +### Configuring threshold limits + +To improve performance when importing large Excel files into the Spreadsheet component, you can configure thresholds for both the maximum number of cells `MaximumDataLimit` and the file size `MaximumFileSize`. These limits help prevent delays or potential server timeouts by restricting excessively large files from being imported. + +When these thresholds are exceeded: +* The Spreadsheet displays an alert dialog indicating that the file is large. + ![Limit file size and data](./images/fileSize_and_dataLimit.jpg) +* Clicking **Cancel** aborts the open process. +* Clicking **OK** proceeds with the open process. + +You can configure the `MaximumDataLimit` and `MaximumFileSize` thresholds on the server side using the following code example: + +**Code Snippet:** + +```csharp +public IActionResult Open(IFormCollection openRequest) +{ + OpenRequest open = new OpenRequest(); + open.File = openRequest.Files[0]; + open.Guid = openRequest["Guid"]; + + // Set maximum allowed number of cells + open.ThresholdLimit.MaximumDataLimit = 1000000; // 1,000,000 cells + + // Set maximum allowed file size in bytes (e.g., 5MB) + open.ThresholdLimit.MaximumFileSize = 5000000; + + var openbook = Content(Workbook.Open(open)); + return openbook; +} +``` + +## How to improve performance on formula calculation in Spreadsheet? + +### Manual calculation mode + +Manual Calculation Mode in the Spreadsheet is a performance optimization feature that allows you to delay formula recalculations until they are explicitly triggered. By default, the Spreadsheet automatically recalculates formulas whenever a dependent cell is edited or changed. While this behavior works well for small datasets, it can result in noticeable lag or UI freezing when working with large spreadsheets that contain many formulas or complex calculation chains. + +To prevent such performance issues during bulk operations—such as importing data, applying formats, or setting multiple formulas — manual calculation mode gives developers control over when recalculations should occur. + +Enabling manual mode is highly beneficial when: +* Importing large Excel or JSON files with formula-heavy sheets. +* Performing bulk updates (e.g., updating rows or columns via code). +* Applying formulas dynamically to a large number of cells. +* You want to postpone calculations until all content or changes are finalized. + +{% if page.publishingplatform == "aspnet-core" %} + +To learn more about Manual Calculation Mode and how to enable it, you can refer to the following [UG link](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/formulas#manual-mode). + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +To learn more about Manual Calculation Mode and how to enable it, you can refer to the following [UG link](https://ej2.syncfusion.com/aspnetmvc/documentation/spreadsheet/formulas#manual-mode). + +{% endif %} + +## How to improve save performance in the Spreadsheet? + +### Handling large file saves with `isFullPost` option + +{% if page.publishingplatform == "aspnet-core" %} + +When saving large Excel files with extensive data and features using **File → Save As** or the **save** method, the Spreadsheet triggers a server API call through a form submit operation. This can lead to performance issues such as timeouts or delays, particularly due to the size and complexity of the workbook. + +To mitigate these issues during the save operation, you can set the `isFullPost` property to **false** in the [`beforeSave`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeSave) event of the Spreadsheet. + +The following code example shows how to set `isFullPost` to **false** in the Spreadsheet component: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + + + + + + +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +When saving large Excel files with extensive data and features using **File → Save As** or the **save** method, the Spreadsheet triggers a server API call through a form submit operation. This can lead to performance issues such as timeouts or delays, particularly due to the size and complexity of the workbook. + +To mitigate these issues during the save operation, you can set the `isFullPost` property to **false** in the [`beforeSave`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeSave) event of the Spreadsheet. + +The following code example shows how to set `isFullPost` to **false** in the Spreadsheet component: + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +@Html.EJS().Spreadsheet("spreadsheet").OpenUrl("/Home/Open").SaveUrl("/Home/Save").BeforeSave("beforeSave").Render() + + +{% endhighlight %} +{% endtabs %} + +{% endif %} + +### Configure JSON serialization options during save + +Serialization options in the Spreadsheet allows you to exclude specific features such as styles, formats, charts, images, wrap, etc. from the `Workbook JSON object` when saving it using the `saveAsJson` method in the Spreadsheet. By skipping unnecessary features, you can significantly improve performance, especially when working with large or complex workbooks. + +This is particularly useful when: +* You need only the raw data without formatting. +* You're saving the `Workbook JSON object` using the `saveAsJson` method in the Spreadsheet. +* You want to minimize the size of the JSON payload and optimize processing speed. + +Proper use of serialization options during save improves performance and reduces the time taken during the save process. + +Refer to the following UG section to learn how to configure these options: + +{% if page.publishingplatform == "aspnet-core" %} + +* [Configure JSON serialization options during save](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/open-save#configure-json-serialization-options) + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +* [Configure JSON serialization options during save](https://ej2.syncfusion.com/aspnetmvc/documentation/spreadsheet/open-save#configure-json-serialization-options) + +{% endif %} + +## How to improve cell selection performance in Spreadsheet? + +### Disabling aggregate calculation + +When working with large datasets in the Spreadsheet, user interactions such as selecting a large range of cells can experience delays. This occurs because, by default, the Spreadsheet performs aggregate calculations (e.g., SUM, AVERAGE, COUNT, MIN, and MAX) on the selected range and displays the results in the sheet tab panel at the bottom-right corner. + +{% if page.publishingplatform == "aspnet-core" %} + +To enhance the responsiveness of cell selection, particularly in performance-critical scenarios, consider disabling unnecessary aggregate calculations using the [`showAggregate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_ShowAggregate) property. + +Benefits: +* Reduces selection lag when dealing with large data ranges. +* Prevents real-time computation of formulas like SUM, AVERAGE, MIN, and MAX for large selections. +* Keeps the UI responsive during large selection operations. + +You can disable aggregate calculation using the following code example: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + + + + +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +To enhance the responsiveness of cell selection, particularly in performance-critical scenarios, consider disabling unnecessary aggregate calculations using the [`showAggregate`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_ShowAggregate) property. + +Benefits: +* Reduces selection lag when dealing with large data ranges. +* Prevents real-time computation of formulas like SUM, AVERAGE, MIN, and MAX for large selections. +* Keeps the UI responsive during large selection operations. + +You can disable aggregate calculation using the following code example: + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} + +@Html.EJS().Spreadsheet("spreadsheet").OpenUrl("/Home/Open").SaveUrl("/Home/Save").ShowAggregate(false).Render() + +{% endhighlight %} +{% endtabs %} + +{% endif %} + +## See Also + +{% if page.publishingplatform == "aspnet-core" %} + +* [Open and Save](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/open-save) +* [Docker Deployment](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/docker-deployment) +* [Scrolling](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/scrolling) + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +* [Open and Save](https://ej2.syncfusion.com/aspnetmvc/documentation/spreadsheet/open-save) +* [Docker Deployment](https://ej2.syncfusion.com/aspnetmvc/documentation/spreadsheet/docker-deployment) +* [Scrolling](https://ej2.syncfusion.com/aspnetmvc/documentation/spreadsheet/scrolling) + +{% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/scrolling.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/scrolling.md index 9323933e4b..e51ffbaf4c 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/scrolling.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/scrolling.md @@ -1,6 +1,6 @@ --- layout: post -title: Scrolling in ##Platform_Name## Tree Grid Component +title: Scrolling in Syncfusion ##Platform_Name## Tree Grid Component description: Learn here all about Scrolling in Syncfusion ##Platform_Name## Tree Grid component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Scrolling @@ -76,7 +76,24 @@ Setting the [`Height`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/ {% endtabs %} {% endif %} +## Sticky header +The Syncfusion ASP.NET MVC TreeGrid provides a useful feature to keep the column headers fixed (sticky) while scrolling through large datasets. This ensures that the headers remain visible at all times, enhancing user experience by making it easier to understand the context of the data displayed, especially when dealing with wide or long hierarchical data. + +For example, in a project management application, users often need to scroll through a detailed list of tasks and subtasks. When the dataset is large, scrolling down can cause confusion if the column headers scroll out of view, making it difficult to remember what each column represents. By enabling sticky headers, the column headers remain visible even while scrolling, allowing users to easily keep track of the data context. + +To enable sticky headers in the TreeGrid, you can simply set the `EnableStickyHeader` property to **true**. This makes the column headers stick to the top of the TreeGrid container or its parent scrolling container when you scroll vertically. + +The following sample demonstrates how to enable or disable the sticky header in the TreeGrid using a [Switch](https://ej2.syncfusion.com/aspnetmvc/documentation/switch/getting-started) and its [Change](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Buttons.Switch.html#Syncfusion_EJ2_Buttons_Switch_Change) event: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/tree-grid/scrolling/scrolling-sticky-header/razor %} +{% endhighlight %} +{% highlight c# tabtitle="sticky-header.cs" %} +{% include code-snippet/tree-grid/scrolling/scrolling-sticky-header/sticky-header.cs%} +{% endhighlight %} +{% endtabs %} ## Scroll to selected row diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/virtual-scroll.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/virtual-scroll.md index ebec051c81..3519c80f1a 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/virtual-scroll.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/virtual-scroll.md @@ -47,11 +47,12 @@ Expand and Collapse state of any child record will be persisted. ### Limitations * Row virtual scrolling is not compatible with the following feature - 1. Batch editing - 2. Detail template - 3. Row template - 4. Rowspan - 5. Autofill + 1. Batch editing + 2. Checkbox selection + 3. Detail template + 4. Row template + 5. Rowspan + 6. Autofill * It is necessary to set a static height for the component or its parent container when using row virtualization. The 100% height will work only if the component height is set to 100%, and its parent container has a static height. @@ -120,11 +121,12 @@ N> Column's `Width` is required for column virtualization. If column's width is * Column virtual scrolling is not compatible with the following feature 1. Colspan 2. Batch editing - 3. Column with infinite scrolling - 4. Stacked header - 5. Row template - 6. Detail template - 7. Autofill - 8. Column chooser + 3. Checkbox selection + 4. Column with infinite scrolling + 5. Stacked header + 6. Row template + 7. Detail template + 8. Autofill + 9. Column chooser N> You can refer to our [`ASP.NET MVC Tree Grid`](https://www.syncfusion.com/aspnet-mvc-ui-controls/tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`ASP.NET MVC Tree Grid example`](https://ej2.syncfusion.com/aspnetmvc/TreeGrid/Overview#/material) to knows how to present and manipulate data. diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/scrolling.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/scrolling.md index 7402a49635..573a8d8eae 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/scrolling.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/scrolling.md @@ -75,7 +75,24 @@ Specify the [`width`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/S {% endtabs %} {% endif %} +## Sticky header +The Syncfusion ASP.NET Core TreeGrid provides a useful feature to keep the column headers fixed (sticky) while scrolling through large datasets. This ensures that the headers remain visible at all times, enhancing user experience by making it easier to understand the context of the data displayed, especially when dealing with wide or long hierarchical data. + +For example, in a project management application, users often need to scroll through a detailed list of tasks and subtasks. When the dataset is large, scrolling down can cause confusion if the column headers scroll out of view, making it difficult to remember what each column represents. By enabling sticky headers, the column headers remain visible even while scrolling, allowing users to easily keep track of the data context. + +To enable sticky headers in the TreeGrid, you can simply set the `enableStickyHeader` property to **true**. This makes the column headers stick to the top of the TreeGrid container or its parent scrolling container when you scroll vertically. + +The following sample demonstrates how to enable or disable the sticky header in the TreeGrid using a [Switch](https://ej2.syncfusion.com/aspnetcore/documentation/switch/getting-started) and its [Change](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Buttons.Switch.html#Syncfusion_EJ2_Buttons_Switch_Change) event: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/tree-grid/scrolling/scrolling-sticky-header/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="sticky-header.cs" %} +{% include code-snippet/tree-grid/scrolling/scrolling-sticky-header/sticky-header.cs%} +{% endhighlight %} +{% endtabs %} ## Scroll to selected row diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/virtual-scroll.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/virtual-scroll.md index 449dba1ca6..ff62ae01a5 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/virtual-scroll.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/virtual-scroll.md @@ -47,11 +47,12 @@ Expand and Collapse state of any child record will be persisted. ### Limitations * Row virtual scrolling is not compatible with the following feature - 1. Batch editing - 2. Detail template - 3. Row template - 4. Rowspan - 5. Autofill + 1. Batch editing + 2. Checkbox selection + 3. Detail template + 4. Row template + 5. Rowspan + 6. Autofill * It is necessary to set a static height for the component or its parent container when using row virtualization. The 100% height will work only if the component height is set to 100%, and its parent container has a static height. @@ -120,11 +121,12 @@ N> Column's `Width` is required for column virtualization. If column's width is * Column virtual scrolling is not compatible with the following feature 1. Colspan 2. Batch editing - 3. Column with infinite scrolling - 4. Stacked header - 5. Row template - 6. Detail template - 7. Autofill - 8. Column chooser + 3. Checkbox selection + 4. Column with infinite scrolling + 5. Stacked header + 6. Row template + 7. Detail template + 8. Autofill + 9. Column chooser N> You can refer to our [`ASP.NET Core Tree Grid`](https://www.syncfusion.com/aspnet-core-ui-controls/tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET Core Tree Grid example [`ASP.NET Core Tree Grid example`](https://ej2.syncfusion.com/aspnetcore/TreeGrid/Overview#/material) to knows how to present and manipulate data. diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index 46e9484aec..14d8a8f3be 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -202,6 +202,7 @@
  • Assist view
  • Toolbar items
  • Custom views
    • +
  • File attachments
  • Templates
  • Appearance
  • Accessibility
    • @@ -295,6 +296,22 @@ + +
  • Block Editor + +
  • Breadcrumb
  • Release Notes -