DevExpress (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 the 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 the Angular project is very easy. You need to add the latest version of DevExtreme package to an already created Angular application:
$ npm install devextreme@19.1 devextreme-angular@19.1 –save –save-exact
allowing DevExpress components to be used.
After trying to start a project, we get the following message:
To resolve this issue, we need to install the stream using the $ npm install stream command.
The next step is to add dx.common.css and dx.light.css to the angular.json file within ‘styles’ to apply the default theme to the components you want.
The theme can be selected from the official site.
The last thing to do to be able to use DevExtreme components is to add to the ngModule the name of the component we want to display. In this example, this is DxDataGridModule, and we do this as follows:
We then create a table in HTML and get the following result.
The view shows a created table of data that can be filtered by any parameter and sorted as desired. Thus, it is possible to automatically sort and filter the data by importing the DevExtreme component. Data manipulation is very simple.
In order to influence the look of the table, it is necessary to use the pseudoclass selector “ng-deep“. (Otherwise, if we have multiple components, we need to add ‘: host’ before:: ng-deep in order for CSS to be applied solely to that component, not globally. But since this example has only one component, we’ll leave it like this.
Using the following code will make the table header dark gray and the header names bold:
The next item is to enable the deletion and editing of data. This must be done within the tags specifying the editing method, and it is also possible to determine individually whether to delete, edit or add a new row using true/false values.
This seems to be a “mode” command.
In our example, editing, adding and deleting in the popup window is enabled, and besides it, there are also row mode, batch mode, cell mode, and form mode.
At the foot of the table, a summary of each column can be added. “TotalItems array”. 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 will see a summary by a number of users, located below the “Ime” column. Also, the view shows how the number increases dynamically, that is, depending on adding new users or deleting existing users.
DisplayFormat is intended only to specify what it will write at the foot of the table, instead of the predefined “Sum / Count…” DevExtreme format, while passing {0} the value we want to display.
If an additional hover effect is to be applied to an element within a component, the method (onCellHoverChanged) = “hover ($ event)“
within the dx-data-grid tag in an HTML document, while within the .ts component this method should be defined as follows:
The above method shows several conditions by which we tell the component that if the row type is ‘data‘ (this is necessary so that the effect does not refer to the titles or table header) and if it is a ‘Ime‘ column then we want to event mouseover results in the information 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 ” Broj stanovnika po km2 (Population per km2)“. We will do this as follows. In order 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 the 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 element, we specify the name of the column as desired, with an additional tag between which we enter the number that we want to be displayed as potency. The rest is pure CSS.
Now it is necessary to determine in CSS what dimensions we want this number to have, and we do this by first specifying the table id (#gridContainer) and the affected element (sup) with the pseudoclass selector ‘ng-deep‘.
The result is:
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.
Web site: https://www.alenibric.com.tr
