How to: Add DevExtreme to a DevExpress XAF Blazor Solution

Installing DevExtreme Controls into a DevExpress XAF Blazor Project

Step 1: Copy DevExtreme Assets to Your Project

To integrate DevExtreme controls into your DevExpress XAF Blazor project, begin by copying essential files:

1. Navigate to the DevExtreme library directory on your system: C:\Program Files\DevExpress {your installed version #}\DevExtreme\Sources\Lib
2. Copy the following directories:
   • css
   • js
   • ts
3. Paste them into the wwwroot folder of your {YourProjectName}.Blazor.Server project.

Step 2: Configure DevExtreme License

DevExtreme requires a license key for proper operation. Follow these steps to set up licensing:

1. Visit the DevExpress Download Manager:
   • DevExpress Download Manager
2. Expand your DevExtreme Subscription and click the “(Copy your license key to the CLIPBOARD)” link.
3. In your {YourProjectName}.Blazor.Server project, create a new JavaScript file named devextreme-license.js in the root directory.
4. Add the following content, replacing {your license key} with the copied key: DevExpress.config({ licenseKey: '{your license key}' });
5. Save the file.

Step 3: Import DevExtreme CSS and JS Files

Modify your _Host.cshtml file to include DevExtreme dependencies. The correct order of imports is crucial.

a. Import jQuery

<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>

b. Import Specific DevExtreme Controls (If Needed)

Some DevExtreme controls, such as dxDiagram, require additional imports. Check the DevExtreme Documentation for your specific control.

<script src="~/js/dx-diagram.min.js"></script>
<link rel="stylesheet" href="~/css/dx-diagram.min.css">

c. Add DevExtreme Themes

<link rel="stylesheet" href="css/dx.light.css">

You can find a list of predefined themes here.

d. Import Core DevExtreme JavaScript Library

<script type="text/javascript" src="js/dx.all.js"></script>

Final Notes

• Ensure that the DevExtreme files are accessible in the wwwroot folder.
• The order of scripts and styles in _Host.cshtml is essential for proper rendering.
• Check the official DevExtreme guide for further details.

With these steps completed, you should be able to use DevExtreme controls within your DevExpress XAF Blazor project.