diff --git a/docs/en/Community-Articles/2020-12-10-How-to-Integrate-the-DevExpress-Blazor-Component/Using DevExpress Components With the ABP Framework.md b/docs/en/Community-Articles/2020-12-10-How-to-Integrate-the-DevExpress-Blazor-Component/Using DevExpress Components With the ABP Framework.md new file mode 100644 index 0000000000..6a638acf94 --- /dev/null +++ b/docs/en/Community-Articles/2020-12-10-How-to-Integrate-the-DevExpress-Blazor-Component/Using DevExpress Components With the ABP Framework.md @@ -0,0 +1,106 @@ +## Using DevExpress Blazor UI Components With the ABP Framework + +Hi, in this step by step article, I will show you how to integrate [DevExpress](https://demos.devexpress.com/blazor/) blazor UI components into ABP Framework-based applications. + +![both-example-result](both-example-result.png) + +*(A screenshot from the example application developed in this article)* + +## Create the Project + +ABP Framework offers startup templates to get into the business faster. We can download a new startup template using [ABP CLI](https://docs.abp.io/en/abp/latest/CLI): + +````bash +abp new DevExpressSample -u blazor +```` + +After the download is finished, open the solution in the Visual Studio (or your favorite IDE): + +![initial-project](initial-project.png) + +* Our project boilerplate will be ready after the download is finished. Then, we can open the solution in the Visual Studio (or any other IDE) and run the `DevExpressSample.DbMigrator` to create the database and seed initial data (which creates the admin user, admin role, permissions etc.) + +* After database and initial data created, +* Run the `DevExpressSample.HttpApi.Host` to see our server side working and +* Run the `DevExpressSample.Blazor` to see our UI working properly. + +> _Default login credentials for admin: username is **admin** and password is **1q2w3E\***_ + +## Install DevExpress + +You can follow [this documentation](https://docs.devexpress.com/Blazor/401986/getting-started/install-components-and-create-an-application/without-devexpress-installer/microsoft-templates) to install DevExpress packages into your computer. + +> Don't forget to add _"DevExpress NuGet Feed"_ to your **Nuget Package Sources**. + +### Adding DevExpress NuGet Packages + +Add the `DevExpress.Blazor` NuGet package to the `DevExpressSample.Blazor` project. + +``` +Install-Package DevExpress.Blazor +``` + +### Register DevExpress Resources + +1. Add the following line to the HEAD section of the `wwwroot/index.html` file within the `DevExpressSample.Blazor` project: + + ```Razor + + + + + ``` + +2. In the `DevExpressSampleBlazorModule` class, call the `AddDevExpressBlazor()` method from your project's `ConfigureServices()` method: + + ```csharp + public override void ConfigureServices(ServiceConfigurationContext context) + { + var environment = context.Services.GetSingletonInstance(); + var builder = context.Services.GetSingletonInstance(); + // ... + builder.Services.AddDevExpressBlazor(); + } + ``` + +3. Register the **DevExpressSample.Blazor** namespace in the `_Imports.razor` file: + + ```Razor + @using DevExpress.Blazor + ``` + +### Result + +The installation step was done. You can use any DevExpress Blazor UI component in your application: + +Example: A Scheduler: + +![sample-appointment](sample-appointment.gif) + +This example has been created by following [this documentation](https://demos.devexpress.com/blazor/SchedulerViewTypes). + +## The Sample Application + +We have created a sample application with [Data Grid](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1) examples. + +### The Source Code + +You can download the source code from [here](https://github.com/abpframework/abp-samples/tree/master/DevExpress-Blazor). + +The related files for this example are marked in the following screenshots. + +![data-grid-app-contract](data-grid-app-contract.png) + +![data-grid-application](data-grid-application.png) + +![data-grid-web](data-grid-blazor.png) + +### Additional Notes + +#### Data Storage + +I've used an in-memory list to store data for this example, instead of a real database. Because it is not related to DevExpress usage. There is a `SampleDataService.cs` file in `Data` folder at `DevExpressSample.Application.Contracts` project. All the data is stored here. + +## Conclusion + +In this article, I've explained how to use [DevExpress](https://www.devexpress.com/blazor/) components in your application. ABP Framework is designed so that it can work with any UI library/framework. diff --git a/docs/en/Community-Articles/2020-12-10-How-to-Integrate-the-DevExpress-Blazor-Component/both-example-result.png b/docs/en/Community-Articles/2020-12-10-How-to-Integrate-the-DevExpress-Blazor-Component/both-example-result.png new file mode 100644 index 0000000000..cc437ed6e7 Binary files /dev/null and b/docs/en/Community-Articles/2020-12-10-How-to-Integrate-the-DevExpress-Blazor-Component/both-example-result.png differ diff --git a/docs/en/Community-Articles/2020-12-10-How-to-Integrate-the-DevExpress-Blazor-Component/cover-image.png b/docs/en/Community-Articles/2020-12-10-How-to-Integrate-the-DevExpress-Blazor-Component/cover-image.png new file mode 100644 index 0000000000..2dc0aed011 Binary files /dev/null and b/docs/en/Community-Articles/2020-12-10-How-to-Integrate-the-DevExpress-Blazor-Component/cover-image.png differ diff --git a/docs/en/Community-Articles/2020-12-10-How-to-Integrate-the-DevExpress-Blazor-Component/data-grid-app-contract.png b/docs/en/Community-Articles/2020-12-10-How-to-Integrate-the-DevExpress-Blazor-Component/data-grid-app-contract.png new file mode 100644 index 0000000000..df81dc5199 Binary files /dev/null and b/docs/en/Community-Articles/2020-12-10-How-to-Integrate-the-DevExpress-Blazor-Component/data-grid-app-contract.png differ diff --git a/docs/en/Community-Articles/2020-12-10-How-to-Integrate-the-DevExpress-Blazor-Component/data-grid-application.png b/docs/en/Community-Articles/2020-12-10-How-to-Integrate-the-DevExpress-Blazor-Component/data-grid-application.png new file mode 100644 index 0000000000..a169b9f9f7 Binary files /dev/null and b/docs/en/Community-Articles/2020-12-10-How-to-Integrate-the-DevExpress-Blazor-Component/data-grid-application.png differ diff --git a/docs/en/Community-Articles/2020-12-10-How-to-Integrate-the-DevExpress-Blazor-Component/data-grid-blazor.png b/docs/en/Community-Articles/2020-12-10-How-to-Integrate-the-DevExpress-Blazor-Component/data-grid-blazor.png new file mode 100644 index 0000000000..af1857a4e0 Binary files /dev/null and b/docs/en/Community-Articles/2020-12-10-How-to-Integrate-the-DevExpress-Blazor-Component/data-grid-blazor.png differ diff --git a/docs/en/Community-Articles/2020-12-10-How-to-Integrate-the-DevExpress-Blazor-Component/initial-project.png b/docs/en/Community-Articles/2020-12-10-How-to-Integrate-the-DevExpress-Blazor-Component/initial-project.png new file mode 100644 index 0000000000..c2a2af265e Binary files /dev/null and b/docs/en/Community-Articles/2020-12-10-How-to-Integrate-the-DevExpress-Blazor-Component/initial-project.png differ diff --git a/docs/en/Community-Articles/2020-12-10-How-to-Integrate-the-DevExpress-Blazor-Component/sample-appointment.gif b/docs/en/Community-Articles/2020-12-10-How-to-Integrate-the-DevExpress-Blazor-Component/sample-appointment.gif new file mode 100644 index 0000000000..cde15e8f74 Binary files /dev/null and b/docs/en/Community-Articles/2020-12-10-How-to-Integrate-the-DevExpress-Blazor-Component/sample-appointment.gif differ