In this article, I will explain how to use DevExtreme components into ASP.NET Zero based applications. I won’t explain details about how to configure and run ASP.NET Zero. There is already detailed explanation here about that. I will focus how to integrate DevExtreme to project and how to use it. Then I will create an advanced (paging, sorting, filtering) DevExtreme datagrid example.

Introduction to DevExtreme

DevExtreme is integrated with the following libraries and frameworks:

  • jQuery versions 2.1–2.2 and 3.x
  • Knockout versions 2.2.3–2.3.0 and 3.1.0–3.4.0
  • AngularJS versions 1.2–1.5
  • Angular versions 2.2.1+

In this artcile I will integrate DevExtreme with using JQuery and Angular versions to ASP.NET Zero. As you know, there are Angular and JQuery version of ASP.NET Zero, too.

So I will use DevExtreme JQuery version in ASP.NET Zero Core MVC & JQuery and use DevExtreme Angular version in ASP.NET Zero Core Angular.

NOTE: Also I will show DevExtreme ASP.NET Core & MVC integration example. But we don’t offer this since it’s not easy to use with existing design.

DevExtreme JQuery

Integration

First, download ASP.NET Zero Core MVC & JQuery. To use DevExtreme in project just add scripts and styles. There are different ways (local, cdn, bower, npm) to install/reference resources. I will install required resources using npm.

Adding devextreme npm package to package.json:

img

Add devextreme npm package