DevExtreme DataGrid Component in Angular Application

DevExpress is a set of tools and controls that help create a graphical user interface and it offers many HTML5/JS widgets. This saves time for a programmer and is also very easy to adjust as needed.

“DevExtreme is a component suite for creating highly responsive web applications for touch devices and traditional desktops. The suite includes 50+ UI components ready to use with jQuery, Angular, AngularJS, Knockout, ASP.NET MVC or ASP.NET Core: data grid, interactive charts, data editors, navigation and multi-purpose widgets designed to look and behave harmoniously in any browser. – source”

The integration of DevExtreme components and Angular project is very simple. You need to add the latest version of DevExtreme package to an already created Angular application as follows:

$ npm install devextreme@19.1 devextreme-angular@19.1-save-exact

 allowing DevExpress components to be used.

We  will get the following message after we try to start the project:

To resolve this issue, you need to install the stream using the command $ npm install stream.

 The next step is to add dx.common.css and dx.light.css to the angular.json file within the ‘styles˙ to apply the default theme to the components preference. The theme can be selected from the official site.

The last thing you need to do to be able to use DevExtreme components is to add to the ngModule the name of components we want to display. In this example that is DxDataGridModule, and we do this as follows:

Then in HTML we create a table and get the following result.

The view shows a created table of data that can be filtered by any parameter and sorted as desired.

It is possible to automatically sort and filter the data by importing the DevExtreme components.

Data manipulation is very simple.

To influence the look of the table, it is necessary to use the „ng-deep” pseudoclass selector.

Otherwise, if we have multiple components you need to add ‘:host:’ in front of::ng-deep, to apply CSS exclusively to that component and not globally. But since this example has only one component, we will leave it like this.

Using the following code we will make the table header dark gray and the header names bold:

The next step is to allow data to be deleted and edited. This must be done within the tags specifying the edit mode and it is possible to determine individually whether to delete, edit or add a new row using true/false values.

You can do that with order „mode.”

In our example, editing, adding and deleting in the popup window is enabled and there is also „row mode”, „batch mode”, „cell mode” i „form mode”.

Table footer, you can add a summary of each table, the so-called „totalltems series”. The simplest way is to pass the name of the column you want to summarize and how depending on what data you want to retrieve. In this example, you’ll see a summary by a number of users, located below the name column. The view also shows how the number increases dynamically, depending on the addition of new users or deletion of existing users.

DisplayFormat is used to determine just what will be written at the footer of the table instead of predefined Sum/Count…” DevExtreme formats, while {0} passes value we want to display.

List of users

If you want to apply an additional effect on „hover” for a single element within a component, it is necessary to call for a method (onCellHoverChanged) = „hover($event)” within the dx-data-grid tag in HTML document, while within the .ts component this method should be defined as follows:

The method above shows several conditions by which we tell the components that is the row type is ‘data’ (this is necessary so that the effect does not refer to the titles ot table header) and if it is a ‘Name’ column then we want to event mouseover to result in the data inside the selected cell element being BOLD and colored yellow, otherwise the color will be black and fontWeight normal.

In our example, we will add another column called “population per km2”. We will do this as it follows. To add potency to a column name, we need to assign a template [headerCellTemplate] to the desired column in the HTML document, where we pass it a name as desired. After defining a column and specifying the format of the data in the table (type: ¨fixedPoint¨, precision: 0), we need to say what we want to do from that header. Therefore, in dxTemplate, within the <div> element, we specify the name of the column as desired, with an additional add between which we enter the number that we want to appear as potency. The rest is pure CSS.

Now it is necessary to determine in CSS what dimension we want this figure to have, and we do this by first specifying the table id (#gridContainer) and the element we are affecting (sup) with the pseudoclass selector ’ng-deep’

The result of what is done is next:

This would be a simplified representation of the use of the DevExtreme data grid component in the Angular project. In another post, we will look at other components and their implementation. If you have any questions, feel free to contact us.