DevExtreme Angular - Add DevExtreme to an ASP.NET Core Angular Application

This article describes how to create an ASP.NET Core Angular application and add a DevExtreme UI component to it. You need Visual Studio 2017 v15.7 or later and .NET Core 2.1 SDK to do this.

1. Open Visual Studio 2017 and use the ASP.NET Core Web Application template to create a new ASP.NET Core Angular application.

2. Open the ClientApp/package.json file and add the devextreme and devextreme-angular packages to the dependencies section:

   package.json

   {
     ...
     "dependencies": {
       ...
       "devextreme": "20.1.16",
       "devextreme-angular": "20.1.16"
     }
   }

   Save the changes and wait until Visual Studio downloaded the dependencies.

3. Reference dx.common.css and a predefined theme stylesheet (dx.light.css in the code below).

   For .NET Core SDK 2.1, change the ClientApp/.angular-cli.json file as follows:

   .angular-cli.json

   {
     "apps": [
       {
         ...
         "styles": [
           "../node_modules/devextreme/dist/css/dx.common.css",
           "../node_modules/devextreme/dist/css/dx.light.css",
           ...
         ] 
       }
     ]
   }

   For .NET Core SDK 2.2 and later, make the following changes to the ClientApp/angular.json file:

   angular.json

   {
     "projects": {
       "ApplicationName": {
         ...
         "architect": {
           "build": {
             ...
             "options": {
               ...
               "styles": [
                 ...
                 "node_modules/devextreme/dist/css/dx.common.css",
                 "node_modules/devextreme/dist/css/dx.light.css"
               ]
             }
           }
         }
       }
     }
   }

4. Only .NET Core SDK 2.2 and later: DevExtreme requires the JSZip library. Since JSZip v3.3.0, the library does not need to be registered. If you use an earlier version, register JSZip in the tsconfig.json file as shown in the JSZip Registration article.

5. Open the ClientApp/src/app/app.module.ts file and import modules that contain individual DevExtreme UI components or a module containing all the DevExtreme UI components and related utilities:

   app.module.ts

   // Imports an individual UI component
   import { DxDataGridModule } from "devextreme-angular"; 
   
   // Imports all the DevExtreme UI components
   // import { DevExtremeModule } from "devextreme-angular"; 
   
   @NgModule({ 
       ... 
       imports: [ 
           ... 
           DxDataGridModule,
           // DevExtremeModule,
           ... 
       ] 
   })

6. Open the ClientApp/src/app/fetch-data/fetch-data.component.html file and replace the table in it with the following code. This code creates the DevExtreme DataGrid UI component and binds it to sample data the FetchDataComponent provides:

   fetch-data.component.html

   <dx-data-grid [dataSource]="forecasts"></dx-data-grid>

Run the application and navigate to the Fetch data page. You should see a DataGrid that displays weather forecast.

Refer to the following resources for code samples and usage examples:

• Component Configuration Syntax
• Technical Demos
• RWA Demos:
  • Sales Viewer
  • Golf Club
  • DX Election
• API Reference

Error E1046: The [FieldName] key field is not found in data objects

In ASP.NET Core, property names are converted to lowerCamelCase during serialization to JSON. If column data fields use the UpperCamelCase, then error E1046 occurs.

Apply one of the following solutions to troubleshoot this issue:

• Disable the conversion in the JSON serializer

  Open the Startup.cs file and modify the ConfigureServices method as follows:

  using Newtonsoft.Json.Serialization;
  // ...
  public void ConfigureServices(IServiceCollection services) {
      // ...
      services.AddMvc() // or `.AddRazorPages`, `.AddControllers`, `.AddControllersWithViews`
          .AddJsonOptions(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver());
  }

  Since ASP.NET Core 3, you can use System.Text.Json instead of Newtonsoft.Json:

  public void ConfigureServices(IServiceCollection services) {
      // ...
      services.AddMvc() // or `.AddRazorPages`, `.AddControllers`, `.AddControllersWithViews`
          .AddJsonOptions(options => options.JsonSerializerOptions.PropertyNamingPolicy = null);
  }

  IMPORTANT

  This solution affects the entire application, and is not recommended if the controllers are used by non-DevExtreme components.

• Serialize objects in the API controller

  Modify the API controller (OrdersController) that the DevExtreme UI component is bound to as shown below:

  using Newtonsoft.Json;
  using Newtonsoft.Json.Serialization;
  // ...
  [HttpGet]
  public object Get(DataSourceLoadOptions loadOptions) {
      var loadResult = DataSourceLoader.Load(SampleData.Orders, loadOptions);
      var json = JsonConvert.SerializeObject(loadResult, new JsonSerializerSettings {
          ContractResolver = new DefaultContractResolver()
      });
      return Content(json, "application/json");
  }