Current filter:
                                You should refresh the page.
                                  • Good morning despite having followed all your guides, I can't bring up the grid icons (those of the filters) and I can't activate the Italian translations always with regards to the grid filters.
                                    I entered the references in the configuration json as per your guide but nothing works.
                                    I attach screens to show you what appears to me

                                • Harold Frederick 01.12.2020


                                  Can you please provide us a sample of your application which illustrates your scenario? You can use one of our demos to do so, or you can recreate your project along with its configuration, zip it and send it here. It would help us to pinpoint the issue. We look forward to your response.

                                • Simo91Webbdesigner 01.12.2020

                                  Good morning,
                                  I'm developing an application with angular and inside it I use a data grid of devexpress.
                                  This is the datagrid code:

                                  <dx-data-grid id="gridContainer" #grigliaDati (onContextMenuPreparing)="addMenuItems($event)" (onRowPrepared)="onRowPrepared($event)" (onEditorPreparing)="onEditorPreparing($event)" [dataSource]="tab.dataSourceGriglia" [showBorders]="true" [allowColumnResizing]="true" [rowAlternationEnabled]="true" [columnAutoWidth]="true" [remoteOperations]="true" [showColumnLines]="true" [showRowLines]="true" columnResizingMode="widget"> <dxo-filter-row [visible]="true" [applyFilter]="onClick"></dxo-filter-row> <dxo-header-filter [visible]="false"></dxo-header-filter> <dxo-filter-panel [visible]="false"></dxo-filter-panel> <dxo-selection mode="multiple" showCheckBoxesMode="always"></dxo-selection> <dxo-group-panel [visible]="tab.groupPanel"></dxo-group-panel> <dxi-column [width]="36" cellTemplate="commandTemplate"> </dxi-column> <dxi-column *ngFor="let colonna of tab.structGriglia" cellTemplateTest="cell" dataField="{{colonna.Name}}" dataType="{{colonna.GridDataType | lowercase}}" caption="{{colonna.Title}}" [width]="colonna.Width > 0 ? colonna.Width : null" [visible] = "colonna.Width == -1 ? false : true" [alignment] = "colonna.HAlign == -1 ? 'left' : colonna.HAlign == 0 ? 'center' : 'right'" cursor="Hand" [allowFiltering] = "colonna.DataType == 4 ? false : colonna.DataType == 5 ? false : true" [allowSorting] = "colonna.DataType == 4 ? false : colonna.DataType == 5 ? false : true" [headerCellTemplate]="colonna.DataType == 5 ? colonna.Type == 2 ? 'headerDocTemplate' : colonna.Type == 3 ? 'headerAttachTemplate' : colonna.Type == 4 ? 'headerNoteTemplate' : null : null" [calculateCellValue]="colonna.DataType == 4 ? estraiListaColore : colonna.DataType == 5 ? colonna.Type == 2 ? estraiEstensione : colonna.Type == 3 ? estraiValoreAllegati : colonna.Type == 4 ? estraiValoreNote : null : colonna.Type == 5 ? estraiListaTesto : null" [cellTemplate]="colonna.DataType == 4 ? 'cellListColorTemplate' : colonna.DataType == 5 ? colonna.Type == 2 ? 'cellTemplate' : colonna.Type == 3 ? 'cellAttachTemplate' : colonna.Type == 4 ? 'cellNoteTemplate' : null : colonna.Type == 5 ? 'cellListTextTemplate' : null" ></dxi-column> <div *dxTemplate="let d of 'commandTemplate'"> <div align="center" title="Comandi"> <mat-icon style="cursor: hand;" (click)="addMenuItems($event)" >build</mat-icon> </div> </div> <div *dxTemplate="let d of 'cellTemplate'"> <img style="display:block; margin-left: auto; margin-right: auto;" [src]="d.value" height="24px" width="24px" /> </div> <div *dxTemplate="let d of 'headerDocTemplate'"> <div align="center" title="Documenti"><mat-icon matTooltip="Documenti">event_note</mat-icon></div> </div> <div *dxTemplate="let d of 'headerAttachTemplate'"> <div align="center" title="Allegati"><mat-icon matTooltip="Allegati">attach_file</mat-icon></div> </div> <div *dxTemplate="let d of 'headerNoteTemplate'"> <div align="center" title="Note"><mat-icon matTooltip="Note">notes</mat-icon></div> </div> <div *dxTemplate="let d of 'cellListColorTemplate'"> <span [ngStyle]="creaPuntoColorato(d.value)"></span> </div> <div *dxTemplate="let d of 'cellListTextTemplate'"> <span>{{d.value}}</span> </div> <div *dxTemplate="let d of 'cellAttachTemplate'"> <img *ngIf="d.value != ''" (click)="openAttach(d)" style="display:block; margin-left: auto; margin-right: auto" [src]="d.value" height="24" width="24" /> </div> <div *dxTemplate="let d of 'cellNoteTemplate'"> <img *ngIf="d.value != ''" (click)="openNote(d)" style="display:block; margin-left: auto; margin-right: auto" [src]="d.value" height="24" width="24" /> </div> </dx-data-grid>

                                  This is my angular.json file

                                  "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/", "assets": [ "src/favicon.ico", "src/assets", "src/web.config" ], "styles": [ "node_modules/devextreme/dist/css/dx.common.css", "node_modules/devextreme/dist/css/dx.light.css", "src/styles.scss", "node_modules/ngx-toastr/toastr.css" ], "scripts": [], "showCircularDependencies": false }

                                1 Solution

                                Creation Date Importance Sort by


                                1) Please make sure that dxicons files which are placed into the "devextreme/dist/css/icons" folder are included in your output folder. You can also take a look at the Images missing in IE11 on deployment ticket where we discussed a similar issue.
                                2) Use Dictionaries to load localized captions for different UI elements. See also: Using Globalize.

                                UPDATED BY Alessandro (DevExpress Support Team):

                                Thank you for your sample. Here are my comments:

                                1) Icons are not displayed because of the font-family: 'material-outline-icons' !important; rule in the "assets\icons\material-icons\outline\style.css" file. We discussed this CSS conflict in the DataGrid - Toolbar icons are invisible when material icons styles are applied ticket. Try recommendations from this ticket.

                                2) Your "sample.component.ts" file does not include a Dictionaries declaration. Include it to translate messages in our components. For example:

                                import { Component } from '@angular/core';  
                                import deMessages from "devextreme/localization/messages/de.json";  
                                import { locale, loadMessages } from "devextreme/localization";  
                                    selector   : 'sample',  
                                    templateUrl: './sample.component.html',  
                                    styleUrls  : ['./sample.component.scss']  
                                export class SampleComponent  


                                • Simo91Webbdesigner 01.15.2020

                                  Hi Alessandro,
                                  I checked what you said about the icons and I confirm that the fonts are in the folder, but the icons do not appear.
                                  Doing an analysis of the generated code in html I noticed that the class dx-show-invalid-badge is put.
                                  Could this be the problem?
                                  Because also analyzing the calls to the css, the fonts are loaded when the page is being loaded

                                • Alessandro (DevExpress Support) 01.15.2020


                                  Our styles contain the dx-show-invalid-badge class. It is difficult to understand why the issue occurs without being able to test it locally. Would you please isolate the issue and post it here as a runnable code example that we can replicate and debug on our side? I hope this will make the situation clearer. Thank you for your time and cooperation in advance.

                                • Simo91Webbdesigner 01.18.2020

                                  hello alessandro, I managed to reconstruct a simple project where I am presented with the problem of icons on the grid.
                                  At the following link you can download the complete project.
                                  Just do an npm install to install the dependencies you need and then you can try launching the web app with ng serve


                                  Let me know


                                • Alessandro (DevExpress Support) 01.20.2020


                                  Thank you for the clarification. I have updated our original answer. Please review it.