Loading and Empty messages?

[Scott Price]

Hello,

Does the grid have a way to show a loading message and an empty message? The EmptyRecord localization property seems to be used in both situations.

Thanks,

Scott

[Praveenkumar Gajendiran]

Hi Scott,

Greetings from Syncfusion support. 

Based on your query, we suspect that your requirement is to customize the loading spinner and localize the default empty-record text content in the Grid component.

For spinner customization, we suggest you to refer the below documentation to achieve your requirement.

Spinner documentation: https://ej2.syncfusion.com/angular/documentation/spinner/template/

For empty-record text localization, we suggest you to set the required culture localization in the Grid(using locale property) and use the base’s L10n load function to load translation object in an application. This is demonstrated in the below code snippet,  we have set the locale culture as ‘de-DE’(German) for the Grid, 

Code Example: 

import { L10n, setCulture } from '@syncfusion/ej2-base'; 

import { Component, OnInit } from '@angular/core'; 

import { data } from './data'; 

import { PageSettingsModel } from '@syncfusion/ej2-angular-grids'; 

  

setCulture('de-DE'); 

  

L10n.load({ 

  'de-DE': { 

    grid: { 

      EmptyRecord: 'Keine Aufzeichnungen angezeigt',
       ..... 

      Item: 'Artikel', 

      Items: 'Artikel' 

    }, 

  } 

}); 

  

@Component({ 

  selector: 'app-root', 

  template: ` 

    <ejs-grid 

      [dataSource]="data" 

      [locale]="de - DE" 

      [allowPaging]="true" 

      [pageSettings]="pageOptions" 

      height="220px" 

    > 

      <e-columns> 

        ..... 

      </e-columns> 

    </ejs-grid> 

  ` 

}) 

export class AppComponent implements OnInit { 

  public data: object[]; 

  public pageOptions: PageSettingsModel; 

  

  ngOnInit(): void { 

    this.data = []; 

    this.pageOptions = { pageSize: 6 }; 

  } 

} 

ScreenShot: 

 

We have prepared a sample based on this for your reference,

Sample: https://stackblitz.com/edit/angular-rvok58?file=app.component.ts

Refer the below Gird’s localization document for more information,

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/global-local/#localization 

Please get back to us if you need further assistance. 

Regards,
Praveenkumar G 

[Scott Price]

Thanks.

When I include this line (after installing the NPM module)

import { setSpinner } from '@syncfusion/ej2-angular-popups';

I get all sorts of errors in the console and the angular server fails to compile. See below for a sample of the errors. I'm on angular CLI 12.1.3, Angular 12.1.3, Node 15.14.0, typescript 4.3.4, webpack 5.44.0

Thanks!

Error: node_modules/@syncfusion/ej2-angular-popups/src/tooltip/tooltip-all.module.d.ts:9:25 - error TS2694: Namespace '"/Users/user1/projects/vaultjs/core-ui/node_modules/@syncfusion/ej2-angular-popups/node_modules/@angular/core/core"' has no exported member 'ɵɵNgModuleDeclaration'.

9 static ɵmod: ɵngcc0.ɵɵNgModuleDeclaration<TooltipAllModule, never, [typeof ɵngcc1.CommonModule, typeof ɵngcc2.TooltipModule], [typeof ɵngcc2.TooltipModule]>;

                          ~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@syncfusion/ej2-angular-popups/src/tooltip/tooltip-all.module.d.ts:10:25 - error TS2694: Namespace '"/Users/user1/projects/vaultjs/core-ui/node_modules/@syncfusion/ej2-angular-popups/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectorDeclaration'.

10 static ɵinj: ɵngcc0.ɵɵInjectorDeclaration<TooltipAllModule>;

                           ~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@syncfusion/ej2-angular-popups/src/tooltip/tooltip.component.d.ts:38:25 - error TS2694: Namespace '"/Users/user1/projects/vaultjs/core-ui/node_modules/@syncfusion/ej2-angular-popups/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.

38 static ɵfac: ɵngcc0.ɵɵFactoryDeclaration<TooltipComponent, never>;

                           ~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@syncfusion/ej2-angular-popups/src/tooltip/tooltip.component.d.ts:39:25 - error TS2694: Namespace '"/Users/user1/projects/vaultjs/core-ui/node_modules/@syncfusion/ej2-angular-popups/node_modules/@angular/core/core"' has no exported member 'ɵɵComponentDeclaration'.

39 static ɵcmp: ɵngcc0.ɵɵComponentDeclaration<TooltipComponent, "ejs-tooltip", never, { "animation": "animation"; "closeDelay": "closeDelay"; "content": "content"; "cssClass": "cssClass"; "enableHtmlParse": "enableHtmlParse"; "enableHtmlSanitizer": "enableHtmlSanitizer"; "enablePersistence": "enablePersistence"; "enableRtl": "enableRtl"; "height": "height"; "isSticky": "isSticky"; "locale": "locale"; "mouseTrail": "mouseTrail"; "offsetX": "offsetX"; "offsetY": "offsetY"; "openDelay": "openDelay"; "opensOn": "opensOn"; "position": "position"; "showTipPointer": "showTipPointer"; "target": "target"; "tipPointerPosition": "tipPointerPosition"; "width": "width"; "windowCollision": "windowCollision"; }, { "afterClose": "afterClose"; "afterOpen": "afterOpen"; "beforeClose": "beforeClose"; "beforeCollision": "beforeCollision"; "beforeOpen": "beforeOpen"; "beforeRender": "beforeRender"; "created": "created"; "destroyed": "destroyed"; }, ["content"], ["*"]>;

                           ~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@syncfusion/ej2-angular-popups/src/tooltip/tooltip.module.d.ts:8:25 - error TS2694: Namespace '"/Users/user1/projects/vaultjs/core-ui/node_modules/@syncfusion/ej2-angular-popups/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.

8 static ɵfac: ɵngcc0.ɵɵFactoryDeclaration<TooltipModule, never>;

                          ~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@syncfusion/ej2-angular-popups/src/tooltip/tooltip.module.d.ts:9:25 - error TS2694: Namespace '"/Users/user1/projects/vaultjs/core-ui/node_modules/@syncfusion/ej2-angular-popups/node_modules/@angular/core/core"' has no exported member 'ɵɵNgModuleDeclaration'.

9 static ɵmod: ɵngcc0.ɵɵNgModuleDeclaration<TooltipModule, [typeof ɵngcc1.TooltipComponent], [typeof ɵngcc2.CommonModule], [typeof ɵngcc1.TooltipComponent]>;

                          ~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@syncfusion/ej2-angular-popups/src/tooltip/tooltip.module.d.ts:10:25 - error TS2694: Namespace '"/Users/user1/projects/vaultjs/core-ui/node_modules/@syncfusion/ej2-angular-popups/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectorDeclaration'.

10 static ɵinj: ɵngcc0.ɵɵInjectorDeclaration<TooltipModule>;

                           ~~~~~~~~~~~~~~~~~~~~~

[Praveenkumar Gajendiran]

Hi Scott,

Thanks for your update. 

We have validated the reported issue and analyzes the shared error stack and we suspect that this issue occurred due to the duplicate packages or due to the package cache in your application. Please follow the below steps to resolve this,  

• Go to the ‘node_modules’ folder, find the ‘@syncfusion’ folder and delete it.
• Now delete the ‘package-lock.json’ file from the root directory of the project.
• Now run command ‘npm cache clean –force’.
• The run the command ‘npm install’.
• After the dependencies are installed, run the application.

Documentation: https://ej2.syncfusion.com/angular/documentation/common/how-to/update-npm-package/ 

 Please ensure the issue after the above steps are done. If the issue still occurs please share the following details, 

• The code snippet of the Spinner and the methods used.
• The exact package version used in the application.
• If possible please share the issue reproducible sample.

The above details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest. 

Regards,
Praveenkumar G