Posted 5 December 2024, 6:04 am EST - Updated 5 December 2024, 6:15 am EST
Hi Team,
We have recently updated to Angular 16 and using a version of Wijmo which supports it we are encountering the following error on navigating in the app using the Angular router
This occurs if we use the getError validation on the wj-flex-grid with wj-flex-grid-columns defined and if we leave the cell in an error state when navigating away using the angular router (ie router.navigate or [routerLink] it generates this error.
I have replicated this issue using the latest available package and Angular 18. See below for code example. Can you advise on a possible solution? We can try to use hrefs but its not an ideal situation and the use of the Angular router is pretty important.
"@angular/animations": "^18.2.0",
"@angular/common": "^18.2.0",
"@angular/compiler": "^18.2.0",
"@angular/core": "^18.2.0",
"@angular/forms": "^18.2.0",
"@angular/platform-browser": "^18.2.0",
"@angular/platform-browser-dynamic": "^18.2.0",
"@angular/router": "^18.2.0",
"@angular/material": "18.2.0",
"@angular/cdk": "18.2.0",
"@ngrx/store": "18.1.1",
"@ngrx/effects": "18.1.1",
"@ngrx/router-store": "18.1.1",
"@ngrx/store-devtools": "18.1.1",
"@mescius/wijmo.angular2.all": "5.20242.21",Grid definition
<ng-container *ngIf="table">
<div class="container-grid">
<wj-flex-grid #filterGrid class="filter-grid" [deferResizing]="true" [alternatingRowStep]="0" [itemsSource]="view">
<ng-container *ngFor="let col of table.columns">
<wj-flex-grid-column [header]="col.title" [binding]="col.name" [align]="'center'" [width]="col.columnWidth">
</wj-flex-grid-column>
</ng-container>
</wj-flex-grid>
</div>
</ng-container>
import { Component } from '@angular/core';
import { NgFor, NgIf } from '@angular/common';
import * as wijmo from '@mescius/wijmo';
import { WjCoreModule } from '@mescius/wijmo.angular2.core';
import { WjGridModule } from '@mescius/wijmo.angular2.grid';
import { TableConfig } from './planted.type';
Component({
selector: 'app-planted',
standalone: true,
imports: [NgFor, NgIf, WjCoreModule, WjGridModule],
templateUrl: './planted.component.html',
styleUrls: ['./planted.component.scss']
})
export class PlantedComponent {
table: TableConfig;
view: wijmo.CollectionView;
constructor() {
this.table = this.createTable();
this.view = new wijmo.CollectionView(this.table.data,
{
getError: this.getError.bind(this),
}
);
}
private createTable(): TableConfig {
return {
columns: [
{
position: 1,
name:'name',
title: 'Name',
colWidth: 200,
},
{
position: 2,
name:'description',
title: 'Description',
colWidth: 200,
}
],
title: '',
data: [{
position: 1,
name: 'Test Name',
description: 'Test Description'
},
{
position: 2,
name: 'Test Name',
description: 'Test Description'
}],
filterColumns: ['name', 'description'],
};
}
private getError(item: any, prop: string): string | null {
let error = null;
switch(prop) {
case 'name':
if (item.name === '') {
error = 'Name is required';
}
break;
case 'description':
if (item.description === '') {
error = 'Description is required';
}
break;
}
return error;
};
}<a mat-flat-button color="primary" [routerLink]="navLink.href">
<h3>{{navLink.label}}</h3>
</a>Example link
new NavLink({ label: 'Planted', href: 'planted' }),
