diff --git a/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/Intergrate-DevExtreme-To-ABP-Based-Application.md b/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/Intergrate-DevExtreme-To-ABP-Based-Application.md
deleted file mode 100644
index eb4d2d1034..0000000000
--- a/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/Intergrate-DevExtreme-To-ABP-Based-Application.md
+++ /dev/null
@@ -1,237 +0,0 @@
-## Integrate DevExtreme Packages to ABP Framework Based Applications
-
-Hi, in this step-by-step article, I will show you how to integrate DevExtreme components into ABP Framework based applications.
-
-## Install DevExtreme
-
-You can follow [this documentation](https://js.devexpress.com/Documentation/17_1/Guide/ASP.NET_MVC_Controls/Prerequisites_and_Installation/) to install devexpress packages.
-
-## Preparing the Project
-
-### Startup template and the initial run
-
-Abp Framework offers startup templates to get into the business faster. We can download a new startup template using Abp CLI:
-
-`abp new DevExtremeSample -m none`
-
-After the download is finished, we run `DevExtremeSample.DbMigrator` project to create the database and seed initial data (admin user, role, etc). Then we run `DevExtremeSample.Web` to see our application working.
-
-> _Default admin username is **admin** and password is **1q2w3E\***_
-
-
-
-### Adding DevExtreme Nuget Packages
-
-Add following `PackageReference` to your `DevExtremeSample.Application.Contracts` project.
-
-``
-
-Add following `PackageReference` to your `DevExtremeSample.Application.Web` project.
-
-``
-
-> Please remember that, you must add _"DevExpress NuGet Feed"_ to your **Nuget Package Sources**. Check [this documentation](https://js.devexpress.com/Documentation/17_1/Guide/ASP.NET_MVC_Controls/Prerequisites_and_Installation/) to more information.
-
-After adding new packages, do `dotnet restore` for your projects.
-
-### Adding DevExtreme NPM Packages
-
-Open `package.json` file in your `DevExtremeSample.Application.Web` project and add following package depency to `depencies` section.
-
-`"devextreme": "^20.1.5"`
-
-Then just open `DevExtremeSample.Application.Web` project folder via CLI and run `yarn` command.
-
-This will add the DevExtreme npm packages to our node_modules folder as seen below.
-
-
-
-We should add some mappings to move required files to under `wwwroot/libs` folder.
-
-Open `abp.resourcemapping.js` file in your `DevExtremeSample.Application.Web` project and replace the content of file with following.
-
-```javascript
-module.exports = {
- aliases: {},
- mappings: {
- "@node_modules/devextreme/dist/**/*": "@libs/devextreme/",
- },
-};
-```
-
-Open `DevExtremeSample.Application.Web` project folder via CLI and run `gulp` command. This action will do mappings as we described before.
-
-
-
-You can see `devextreme` folder in your `wwwroot/libs` folder.
-
-
-
-### Adding DevExtreme Css Files To Global Bundles
-
-Open your `DevExtremeSampleWebModule.cs` file in your `DevExtremeSample.Application.Web` project and add following code to `ConfigureServices` method.
-
-```csharp
-Configure(options =>
-{
- options
- .StyleBundles
- .Get(StandardBundles.Styles.Global)
- .AddFiles("/libs/devextreme/css/dx.common.css")
- .AddFiles("/libs/devextreme/css/dx.light.css");
-});
-```
-
-### Adding DevExtreme Js Files
-
-We cannot add DevExtreme js packages to `Global Script Bundles`, because DevExtreme js packages requires to located in the `` section.
-
-But we can create `ViewComponent` and render it at `` section with `AbpLayoutHookOptions`.
-
-Create `Components` folder in your `DevExtremeSample.Application.Web` project. Then create `DevExtremeJs` folder under `Components` folder.
-
-Create `Default.cshtml` file in your `DevExtremeJs` folder and paste following codes to your file.
-
-```csharp
-@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bundling
-
-
-
-
-
-```
-
-Create `DevExtremeJsViewComponent.cs` file in your `DevExtremeJs` folder and paste following codes to your file.
-
-```csharp
-namespace DevExtremeSample.Web.Components.DevExtremeJs
-{
- public class DevExtremeJsViewComponent : AbpViewComponent
- {
- public IViewComponentResult Invoke()
- {
- return View("/Components/DevExtremeJs/Default.cshtml");
- }
- }
-}
-```
-
-After that, your `*.Web` project should be like as following.
-
-
-
-Then we can add this view component to `` section by using **hooks**.
-
-Open your `DevExtremeSampleWebModule.cs` file in your `DevExtremeSample.Application.Web` project and add following code to `ConfigureServices` method.
-
-```csharp
-Configure(options =>
-{
- options.Add(
- LayoutHooks.Head.Last, //The hook name
- typeof(DevExtremeJsViewComponent) //The component to add
- );
-});
-```
-
-### Manipulate `JQueryScriptContributor`
-
-In ABP Framework, all javascript files are located at the end of file by default. But DevExtreme is using `inline` javascript codes and those are requires the `jQuery` package located at `` section.
-
-ABP Framework has a one contributor that named `JQueryScriptContributor` for `jQuery` packages. It has `jQuery` and some abp packages. We need to manipulate that.
-
-So create `jQuery` folder in `Components` folder at your `*.Web` project.
-
-Create `Default.cshtml` file in your `jQuery` folder and paste following codes to your file.
-
-```csharp
-@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bundling
-
-
-```
-
-Create `JqueryHeadViewComponent.cs` file in your `jQuery` folder and paste following codes to your file.
-
-```csharp
-using Microsoft.AspNetCore.Mvc;
-using Volo.Abp.AspNetCore.Mvc;
-
-namespace DevExtremeSample.Web.Components.jQuery
-{
- public class JqueryHeadViewComponent : AbpViewComponent
- {
- public IViewComponentResult Invoke()
- {
- return View("/Components/jQuery/Default.cshtml");
- }
- }
-}
-```
-
-After that, your `*.Web` project should be like as following.
-
-
-
-Then replace your `AbpLayoutHookOptions` with following code block to add `JqueryHeadViewComponent` to `` section.
-
-```csharp
-Configure(options =>
-{
- options.Add(
- LayoutHooks.Head.Last, //The hook name
- typeof(JqueryHeadViewComponent) //The component to add
- ).Add(
- LayoutHooks.Head.Last, //The hook name
- typeof(DevExtremeJsViewComponent) //The component to add
- );
-});
-```
-
-Now create `MyScriptContributor.cs` file at your `*.Web` project and paste following codes to your file.
-
-```csharp
-using System.Collections.Generic;
-using Volo.Abp.AspNetCore.Mvc.UI.Bundling;
-using Volo.Abp.AspNetCore.Mvc.UI.Packages.Core;
-using Volo.Abp.Modularity;
-
-namespace DevExtremeSample.Web
-{
- [DependsOn(typeof(CoreScriptContributor))]
- public class MyScriptContributor : BundleContributor
- {
- public override void ConfigureBundle(BundleConfigurationContext context)
- {
- context.Files.AddIfNotContains("/libs/abp/jquery/abp.jquery.js");
- }
- }
-}
-```
-
-Finally, we replace the `JQueryScriptContributor` with `MyScriptContributor`.
-
-Replace the `AbpBundlingOptions` at the `DevExtremeSampleWebModule.cs` file with the following code block.
-
-```csharp
-Configure(options =>
-{
- options
- .StyleBundles
- .Get(StandardBundles.Styles.Global)
- .AddFiles("/libs/devextreme/css/dx.common.css")
- .AddFiles("/libs/devextreme/css/dx.light.css");
-
- options.ScriptBundles
- .Get(StandardBundles.Scripts.Global)
- .Contributors
- .Replace();
-});
-```
-
-### Result
-
-After following this step-by-step article you can use all DevExtreme features in your project.
-
-
-
-> The result example is created by following [this documentation](https://js.devexpress.com/Demos/WidgetsGallery/Demo/ProgressBar/Overview/NetCore/Light/).
diff --git a/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/Using-DevExtreme-In-ABP-Based-Application.md b/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/Using-DevExtreme-In-ABP-Based-Application.md
index c2c2ddeed7..38f947d19b 100644
--- a/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/Using-DevExtreme-In-ABP-Based-Application.md
+++ b/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/Using-DevExtreme-In-ABP-Based-Application.md
@@ -1,14 +1,211 @@
## Using DevExtreme in ABP Based Application
-Hi, in this article, I will explain some cases of DevExtreme usages in ABP based application.
+Hi, in this step-by-step article, I will show you how to integrate DevExtreme components into ABP Framework based applications.
-This article will reference [this](https://github.com/abpframework/abp-samples/tree/master/DevExtreme-Mvc) sample.
+## Install DevExtreme
-## Integrate DevExtreme Packages to ABP Framework Based Applications
+You can follow [this documentation](https://js.devexpress.com/Documentation/17_1/Guide/ASP.NET_MVC_Controls/Prerequisites_and_Installation/) to install devexpress packages.
-Please follow [Intergrate DevExtreme documentation](Intergrate-DevExtreme-To-ABP-Based-Application.md) to see each step. This article will not include setup informations.
+## Preparing the Project
-## Data Storage
+### Startup template and the initial run
+
+Abp Framework offers startup templates to get into the business faster. We can download a new startup template using Abp CLI:
+
+`abp new DevExtremeSample -m none`
+
+After the download is finished, we run `DevExtremeSample.DbMigrator` project to create the database and seed initial data (admin user, role, etc). Then we run `DevExtremeSample.Web` to see our application working.
+
+> _Default admin username is **admin** and password is **1q2w3E\***_
+
+
+
+### Adding DevExtreme Nuget Packages
+
+Add the `DevExtreme.AspNet.Core` package to your `DevExtremeSample.Application.Contracts` project.
+
+```
+dotnet add package DevExtreme.AspNet.Core
+```
+
+Add the `DevExtreme.AspNet.Data` package to your `DevExtremeSample.Web` project.
+
+```
+dotnet add package DevExtreme.AspNet.Data
+```
+
+> Please remember that, you must add _"DevExpress NuGet Feed"_ to your **Nuget Package Sources**. Check [this documentation](https://js.devexpress.com/Documentation/17_1/Guide/ASP.NET_MVC_Controls/Prerequisites_and_Installation/) to more information.
+
+### Adding DevExtreme NPM Depencies
+
+Open your `DevExtremeSample.Web` project folder with console and add `devextreme` package depency via `npm` or `yarn`.
+
+`npm install devextreme` or `yarn add devextreme`
+
+This will add the DevExtreme npm packages to our node_modules folder and `package.json` file as seen below.
+
+### Adding Resource Mappings
+
+The `devextreme` npm package is saved under `node_modules` folder. We need to move them in our `wwwroot/libs` folder to use them in our web project. To add packages in our application, we need to create some mappings by using **Abp Resource Mapping**.
+
+Open `abp.resourcemapping.js` file in your `DevExtremeSample.Web` project and add following definition to inside `mappings` object.
+
+`"@node_modules/devextreme/dist/**/*": "@libs/devextreme/"`
+
+After that, the `abp.resourcemapping.js` file should looks like as following.
+
+```
+module.exports = {
+ aliases: {},
+ mappings: {
+ "@node_modules/devextreme/dist/**/*": "@libs/devextreme/",
+ },
+};
+```
+
+Open your `DevExtremeSample.Web` project folder with console and run `gulp` command. This action will do mappings as we described before.
+
+
+
+You can see `devextreme` folder in your `wwwroot/libs` folder.
+
+
+
+### Adding DevExtremeStyleContributor
+
+We will add DevExtreme css files as a `BundleContributor`. To get more information, please see this [documentation](https://docs.abp.io/en/abp/latest/UI/AspNetCore/Bundling-Minification).
+
+Create `Bundling` folder in your `DevExtremeSample.Web` project. Then create `DevExtremeStyleContributor.cs` file and copy following code block to inside it.
+
+```csharp
+using System.Collections.Generic;
+using Volo.Abp.AspNetCore.Mvc.UI.Bundling;
+
+namespace DevExtremeSample.Web.Bundling
+{
+ public class DevExtremeStyleContributor : BundleContributor
+ {
+ public override void ConfigureBundle(BundleConfigurationContext context)
+ {
+ context.Files.AddIfNotContains("/libs/devextreme/css/dx.common.css");
+ context.Files.AddIfNotContains("/libs/devextreme/css/dx.light.css");
+ }
+ }
+}
+```
+
+Open your `DevExtremeSampleWebModule.cs` file in your `DevExtremeSample.Web` project and add following code to `ConfigureServices` method.
+
+```csharp
+Configure(options =>
+{
+ options
+ .StyleBundles
+ .Get(StandardBundles.Styles.Global)
+ .AddContributors(typeof(DevExtremeStyleContributor));
+});
+```
+
+### Adding DevExtremeScriptContributor
+
+We cannot add DevExtreme js packages to `Global Script Bundles`, because DevExtreme is using some inline javascript codes and js packages requires to located in the `` section.
+
+But we can create `ViewComponent` and render it at `` section with `AbpLayoutHookOptions`.
+
+First, create `DevExtremeScriptContributor.cs` file at your `Bundling` folder and copy following code block to inside it.
+
+```csharp
+using System.Collections.Generic;
+using Volo.Abp.AspNetCore.Mvc.UI.Bundling;
+using Volo.Abp.AspNetCore.Mvc.UI.Packages.JQuery;
+using Volo.Abp.Modularity;
+
+namespace DevExtremeSample.Web.Bundling
+{
+ [DependsOn(
+ typeof(JQueryScriptContributor)
+ )]
+ public class DevExtremeScriptContributor : BundleContributor
+ {
+ public override void ConfigureBundle(BundleConfigurationContext context)
+ {
+ context.Files.AddIfNotContains("/libs/devextreme/js/dx.all.js");
+ context.Files.AddIfNotContains("/libs/devextreme/js/dx.aspnet.mvc.js");
+ context.Files.AddIfNotContains("/libs/devextreme/js/dx.aspnet.data.js");
+ }
+ }
+}
+```
+
+As you see, the `DevExtremeScriptContributor` is depends on `JQueryScriptContributor`. All packages are `JQueryScriptContributor` will added before the `DevExtremeScriptContributor` packages.
+
+#### Create DevExtremeJsViewComponent
+
+Create `Components` folder in your `DevExtremeSample.Web` project. Then create `DevExtremeJs` folder under `Components` folder.
+
+Create `Default.cshtml` file in your `DevExtremeJs` folder and paste following codes to your file.
+
+```csharp
+@using DevExtremeSample.Web.Bundling
+@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bundling
+
+
+
+
+```
+
+Create `DevExtremeJsViewComponent.cs` file in your `DevExtremeJs` folder and paste following codes to your file.
+
+```csharp
+namespace DevExtremeSample.Web.Components.DevExtremeJs
+{
+ public class DevExtremeJsViewComponent : AbpViewComponent
+ {
+ public IViewComponentResult Invoke()
+ {
+ return View("/Components/DevExtremeJs/Default.cshtml");
+ }
+ }
+}
+```
+
+After that, your `*.Web` project should be like as following.
+
+
+
+Then we can add this view component to `` section by using **hooks**.
+
+Open your `DevExtremeSampleWebModule.cs` file in your `DevExtremeSample.Application.Web` project and add following code to `ConfigureServices` method.
+
+```csharp
+Configure(options =>
+{
+ options.Add(
+ LayoutHooks.Head.Last, //The hook name
+ typeof(DevExtremeJsViewComponent) //The component to add
+ );
+});
+```
+
+### Result
+
+After following this step-by-step article you can use all DevExtreme features in your project.
+
+
+
+> The result example is created by following [this documentation](https://js.devexpress.com/Demos/WidgetsGallery/Demo/ProgressBar/Overview/NetCore/Light/).
+
+---
+
+### Sample Application
+
+We have created a sample application with [Tree List](https://demos.devexpress.com/ASPNetCore/Demo/TreeList/Overview/) and [Data Grid](https://demos.devexpress.com/ASPNetCore/Demo/DataGrid/Overview/) examples.
+
+You can download the source code from [here](https://github.com/abpframework/abp-samples/tree/master/DevExtreme-Mvc).
+
+We have some notes about this sample and general usages of DevExtreme at ABP based application.
+
+### Data Storage
We will use an in-memory list for using data storage for this sample.
@@ -16,13 +213,13 @@ There is a `SampleDataService.cs` file in `Data` folder at `*.Application.Contra
We did not create `Entities` etc. Because we want to show "How to use DevExtreme?", because of that, in this sample we focused to application and UI layer.
-## JSON Serialization
+### JSON Serialization
You can see some `[JsonProperty(Name = "OrderId")]` attributes at DTO's. In this sample, we use that attribute on DTO's properties because DevExtreme official resource is suggesting to _disable the conversion in the JSON serializer_ [(ref)](https://js.devexpress.com/Documentation/19_1/Guide/Angular_Components/Visual_Studio_Integration/Add_DevExtreme_to_an_ASP.NET_Core_Angular_Application/#Troubleshooting). **DO NOT DO THAT!**
If you change **the conversion in the JSON serializer**, some pre-build abp modules may occur a problem.
-## MVC
+### MVC
You can use some DevExtreme functions to create UI. The following code blocks show you how you can use it with ABP Applicaion Services.
diff --git a/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/devextreme-js.png b/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/devextreme-js.png
index 4fdf614efc..9252e74dbc 100644
Binary files a/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/devextreme-js.png and b/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/devextreme-js.png differ
diff --git a/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/devextreme-notes.txt b/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/devextreme-notes.txt
deleted file mode 100644
index 14f5493cda..0000000000
--- a/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/devextreme-notes.txt
+++ /dev/null
@@ -1,56 +0,0 @@
-
-libs/devextreme/js > dx.aspnet.data.js
-is added by hand. solve it.
-
-
-adding nuget.
-
-install devexpress to local.
-nuget sources Add -Name "DevExtreme ASP.NET MVC Controls" -Source "%ProgramFiles(x86)%\DevExpress 20.1\DevExtreme\System\DevExtreme\Bin\AspNetCore"
-
-cd -> *.Web
-
-dotnet add package DevExtreme.AspNet.Data
-dotnet add package DevExtreme.AspNet.Core
-
-package.json
-add -> "devextreme": "^20.1.5"
-
-*.Web -> comm -> yarn
-
-abp.resourcemapping.js
-add -> "@node_modules/devextreme/dist/**/*": "@libs/devextreme/"
-
-*.Web -> comm -> gulp
-
-*.Web -> *WebModule -> add
-
-
-
-
-```csharp
-Configure(options =>
-{
- options
- .StyleBundles
- .Get(StandardBundles.Styles.Global)
- .AddFiles("/libs/devextreme/css/dx.common.css")
- .AddFiles("/libs/devextreme/css/dx.light.css");
-
- options.ScriptBundles
- .Get(StandardBundles.Scripts.Global)
- .Contributors
- .Replace();
-});
-
-Configure(options =>
-{
- options.Add(
- LayoutHooks.Head.Last, //The hook name
- typeof(JqueryHeadViewComponent) //The component to add
- ).Add(
- LayoutHooks.Head.Last, //The hook name
- typeof(DevExtremeHeadViewComponent) //The component to add
- );
-});
-```
\ No newline at end of file
diff --git a/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/jquery-head.png b/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/jquery-head.png
deleted file mode 100644
index a89c465bdc..0000000000
Binary files a/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/jquery-head.png and /dev/null differ
diff --git a/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/yarn.png b/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/yarn.png
deleted file mode 100644
index a572068787..0000000000
Binary files a/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/yarn.png and /dev/null differ