DevExpress UI for Razor Components
This demo application is a preview of the DevExpress UI for Razor Components.
The DevExpress UI components featured in this demo are available for free download and can be used in your next Razor Components/Blazor app.*
* Like any software preview, the DevExpress UI for Razor Components is not without fault. You should not use these products in production environments or in mission-critical applications.
Check out this demo in live.
Set up your environment
- Install Visual Studio 2019
- Ensure that you have .NET Core 3 installed.
- If you have the release version of Visual Studio 2019, please ensure that you have the "Use previews of the .NET Core SDK" option enabled.
How to run this demo on your machine
- Download the "demo" directory from this repository.
- Open demo/Demo.RazorComponents.sln in Visual Studio 2019.
- Start the application.
How to create a new project
Follow the steps below to try our Razor Components in your own application.
- Create a new solution using the "Razor Components" or "Blazor" template in Visual Studio 2019.
- Register the DevExpress Early Access feed in Visual Studio's NuGet Package Manager.
- Install the "DevExpress.RazorComponents" NuGet package.
- Obtain the client runtime directory from the GitHub repository - download all files from this directory. Put the downloaded files in the "wwwroot" directory of your project. Include that files to your start page.
- Register our tag namespace and helper in /Components/_ViewImports.cshtml:
@using DevExpress.RazorComponents @addTagHelper *, DevExpress.RazorComponents
- Your application is ready to use DevExpress Razor Components.
1. DxDataGrid in Blazor
If you use Blazor (client-side hosting via MonoWASM) with DxDataGrid, you may find the following exception in the browser:
"System.InvalidOperationException: No generic method 'Take' on type 'System.Linq.Queryable' is compatible with the supplied type arguments and arguments."
Please refer the original mono issue in github for a solution:
Or, your can just turn off the linker. To do this, navigate to your [ProjectName].Client.csproj and add the following line:
So, the project content looks as follows:
<Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> ... <BlazorLinkOnBuild>false</BlazorLinkOnBuild> </PropertyGroup> ... </Project>
Included Demo Modules
- Data Grid
- Column Types
- Large Datasets
- Pivot Grid
- Data Binding Basics
- Large Datasets
- Data Editors
- Combo Box – Business Object List
- Combo Box – Cascading Lists
- Date Edit
- Spin Edit
- Text Box