Posted 23 November 2018, 9:22 am EST
Virtual cursor slows when you press the up and down arrows on the flexgrid keyboard when creating complex HTML documents
Example : angular 7.0
Wijmo Evaluation Version (5.20183.550)
ts :
icon1 = “fa fa-folder fa-lg”
menu = [
{
title: “menu1”,
items: [
{
title: “sub1”, icon: this.icon1, active: true,
items: [
{ title: “item1”, url: “/” },
{ title: “item2”, url: “/box2” },
{ title: “item3”, url: “/box3” },
{ title: “item4”, url: “/box4” },
{ title: “item5”, url: “/box5” },
{ title: “item6”, url: “/box6” },
{ title: “item7”, url: “/box7” },
{ title: “item8”, url: “/box8” },
{ title: “item9”, url: “/box9” },
{ title: “item0”, url: “/box2” },
{ title: "item1", url: "/box2" }, { title: "item2", url: "/box2" }, { title: "item3", url: "/box3" }, { title: "item4", url: "/box4" }, { title: "item5", url: "/box5" }, { title: "item6", url: "/box6" }, { title: "item7", url: "/box7" }, { title: "item8", url: "/box8" }, { title: "item9", url: "/box9" }, { title: "item0", url: "/box2" }, { title: "item1", url: "/box2" }, { title: "item2", url: "/box2" }, { title: "item3", url: "/box3" }, { title: "item4", url: "/box4" }, { title: "item5", url: "/box5" }, { title: "item6", url: "/box6" }, { title: "item7", url: "/box7" }, { title: "item8", url: "/box8" }, { title: "item9", url: "/box9" }, { title: "item1", url: "/box2" }, { title: "item2", url: "/box2" }, { title: "item3", url: "/box3" }, { title: "item4", url: "/box4" }, { title: "item5", url: "/box5" }, { title: "item6", url: "/box6" }, { title: "item7", url: "/box7" }, { title: "item8", url: "/box8" }, { title: "item9", url: "/box9" }, { title: "item1", url: "/box2" }, { title: "item2", url: "/box2" }, { title: "item3", url: "/box3" }, { title: "item4", url: "/box4" }, { title: "item5", url: "/box5" }, { title: "item6", url: "/box6" }, { title: "item7", url: "/box7" }, { title: "item8", url: "/box8" }, { title: "item9", url: "/box9" }, { title: "item1", url: "/box2" }, { title: "item2", url: "/box2" }, { title: "item3", url: "/box3" }, { title: "item4", url: "/box4" }, { title: "item5", url: "/box5" }, { title: "item6", url: "/box6" }, { title: "item7", url: "/box7" }, { title: "item8", url: "/box8" }, { title: "item9", url: "/box9" }, { title: "item1", url: "/box2" }, { title: "item2", url: "/box2" }, { title: "item3", url: "/box3" }, { title: "item4", url: "/box4" }, { title: "item5", url: "/box5" }, { title: "item6", url: "/box6" }, { title: "item7", url: "/box7" }, { title: "item8", url: "/box8" }, { title: "item9", url: "/box9" }, { title: "item1", url: "/box2" }, { title: "item2", url: "/box2" }, { title: "item3", url: "/box3" }, { title: "item4", url: "/box4" }, { title: "item5", url: "/box5" }, { title: "item6", url: "/box6" }, { title: "item7", url: "/box7" }, { title: "item8", url: "/box8" }, { title: "item9", url: "/box9" }, { title: "item1", url: "/box2" }, { title: "item2", url: "/box2" }, { title: "item3", url: "/box3" }, { title: "item4", url: "/box4" }, { title: "item5", url: "/box5" }, { title: "item6", url: "/box6" }, { title: "item7", url: "/box7" }, { title: "item8", url: "/box8" }, { title: "item9", url: "/box9" }, { title: "item1", url: "/box2" }, { title: "item2", url: "/box2" }, { title: "item3", url: "/box3" }, { title: "item4", url: "/box4" }, { title: "item5", url: "/box5" }, { title: "item6", url: "/box6" }, { title: "item7", url: "/box7" }, { title: "item8", url: "/box8" }, { title: "item9", url: "/box9" }, { title: "item1", url: "/box2" }, { title: "item2", url: "/box2" }, { title: "item3", url: "/box3" }, { title: "item4", url: "/box4" }, { title: "item5", url: "/box5" }, { title: "item6", url: "/box6" }, { title: "item7", url: "/box7" }, { title: "item8", url: "/box8" }, { title: "item9", url: "/box9" }, { title: "item1", url: "/box2" }, { title: "item2", url: "/box2" }, { title: "item3", url: "/box3" }, { title: "item4", url: "/box4" }, { title: "item5", url: "/box5" }, { title: "item6", url: "/box6" }, { title: "item7", url: "/box7" }, { title: "item8", url: "/box8" }, ] }, { title: "sub2", icon: this.icon1, active: true, items: [ { title: "item1", url: "/box2" }, { title: "item2", url: "/box2" }, { title: "item3", url: "/box3" }, { title: "item4", url: "/box4" }, { title: "item5", url: "/box5" }, { title: "item6", url: "/box6" }, { title: "item7", url: "/box7" }, { title: "item8", url: "/box8" }, { title: "item9", url: "/box9" }, ] }, { title: "sub3", icon: this.icon1, active: true, items: [ { title: "item1", url: "/box2" }, { title: "item2", url: "/box2" }, { title: "item3", url: "/box3" }, { title: "item4", url: "/box4" }, { title: "item5", url: "/box5" }, { title: "item6", url: "/box6" }, { title: "item7", url: "/box7" }, { title: "item8", url: "/box8" }, { title: "item9", url: "/box9" }, ] }, { title: "sub4", icon: this.icon1, active: true, items: [ { title: "item1", url: "/box2" }, { title: "item2", url: "/box2" }, { title: "item3", url: "/box3" }, { title: "item4", url: "/box4" }, { title: "item5", url: "/box5" }, { title: "item6", url: "/box6" }, { title: "item7", url: "/box7" }, { title: "item8", url: "/box8" }, { title: "item9", url: "/box9" }, ] }, { title: "sub5", icon: this.icon1, active: true, items: [ { title: "item1", url: "/box2" }, { title: "item2", url: "/box2" }, { title: "item3", url: "/box3" }, { title: "item4", url: "/box4" }, { title: "item5", url: "/box5" }, { title: "item6", url: "/box6" }, { title: "item7", url: "/box7" }, { title: "item8", url: "/box8" }, { title: "item9", url: "/box9" }, ] }, { title: "sub6", icon: this.icon1, active: true, items: [ { title: "item1", url: "/box2" }, { title: "item2", url: "/box2" }, { title: "item3", url: "/box3" }, { title: "item4", url: "/box4" }, { title: "item5", url: "/box5" }, { title: "item6", url: "/box6" }, { title: "item7", url: "/box7" }, { title: "item8", url: "/box8" }, { title: "item9", url: "/box9" }, ] }, { title: "sub7", icon: this.icon1, active: true, items: [ { title: "item1", url: "/box2" }, { title: "item2", url: "/box2" }, { title: "item3", url: "/box3" }, { title: "item4", url: "/box4" }, { title: "item5", url: "/box5" }, { title: "item6", url: "/box6" }, { title: "item7", url: "/box7" }, { title: "item8", url: "/box8" }, { title: "item9", url: "/box9" }, ] }, { title: "sub8", icon: this.icon1, active: true, items: [ { title: "item1", url: "/box2" }, { title: "item2", url: "/box2" }, { title: "item3", url: "/box3" }, { title: "item4", url: "/box4" }, { title: "item5", url: "/box5" }, { title: "item6", url: "/box6" }, { title: "item7", url: "/box7" }, { title: "item8", url: "/box8" }, { title: "item9", url: "/box9" }, ] }, { title: "sub9", icon: this.icon1, active: true, items: [ { title: "item1", url: "/box2" }, { title: "item2", url: "/box2" }, { title: "item3", url: "/box3" }, { title: "item4", url: "/box4" }, { title: "item5", url: "/box5" }, { title: "item6", url: "/box6" }, { title: "item7", url: "/box7" }, { title: "item8", url: "/box8" }, { title: "item9", url: "/box9" }, ] }, { title: "sub10", icon: this.icon1, active: true, items: [ { title: "item1", url: "/box2" }, { title: "item2", url: "/box2" }, { title: "item3", url: "/box3" }, { title: "item4", url: "/box4" }, { title: "item5", url: "/box5" }, { title: "item6", url: "/box6" }, { title: "item7", url: "/box7" }, { title: "item8", url: "/box8" }, { title: "item9", url: "/box9" }, ] }, { title: "sub11", icon: this.icon1, active: true, items: [ { title: "item1", url: "/box2" }, { title: "item2", url: "/box2" }, { title: "item3", url: "/box3" }, { title: "item4", url: "/box4" }, { title: "item5", url: "/box5" }, { title: "item6", url: "/box6" }, { title: "item7", url: "/box7" }, { title: "item8", url: "/box8" }, { title: "item9", url: "/box9" }, ] }, { title: "sub12", icon: this.icon1, active: true, items: [ { title: "sub12-1", url: "/about" }, { title: "sub12-1-1", items: [ { title: "item1", url: "/box2" }, { title: "item2", url: "/box2" }, { title: "item3", url: "/box3" }, { title: "item4", url: "/box4" }, { title: "item5", url: "/box5" }, { title: "item6", url: "/box6" }, { title: "item7", url: "/box7" }, { title: "item8", url: "/box8" }, { title: "item9", url: "/box9" }, ] }, { title: "sub12-1-2", items: [ { title: "item1", url: "/box2" }, { title: "item2", url: "/box2" }, { title: "item3", url: "/box3" }, { title: "item4", url: "/box4" }, { title: "item5", url: "/box5" }, { title: "item6", url: "/box6" }, { title: "item7", url: "/box7" }, { title: "item8", url: "/box8" }, { title: "item9", url: "/box9" }, ] }, ] }, ] }, { title: "menu2", icon: this.icon, active: true, items: [ { title: "Item 1", url: "/first", }, { title: "Item 2", url: "/contact" }, ] }, { title: "menu3", icon: this.icon, active: true, items: [ { title: "Item 1", url: "/about", }, { title: "Item 2", url: "/contact" }, ] },
]
pad(n, width) {
n = n + ‘’;
return n.length >= width ? n : new Array(width - n.length + 1).join(‘0’) + n;
}
getidB(a1, a2, a3, a4?: any) {
if (a4) {
return ‘a’ + this.pad(a1, 2) + this.pad(a2, 2) + this.pad(a3, 2) + this.pad(a4, 2);
}
else {
return ‘a’ + this.pad(a1, 2) + this.pad(a2, 2) + this.pad(a3, 2) + ‘00’;
}
}
menuclick(event) {
}
filterFunction() {
}
data;
columns;
ngOnInit() {
this.data=new wjcCore.CollectionView(this.getSampleData(100000));
this.columns=[
{header:“Name id”,binding:“name.id”,visible:true},
{header:“Name value”,binding:“name.value”,visible:true},
{header:“Type id”,binding:“type.id”,visible:true},
{header:“Type value”,binding:“type.value”,visible:true}
];
}
init(grid){
}
getSampleData(count:number):any{
var data=;
for(var i=1;i<=count;i++){
data.push({
name:{
id:i,
value:“name”+i
},
type:{
id:2i,
value:“type”+(2i)
}
})
}
return data;
}
html :
<ul> <li *ngFor="let link of menu; let i = index;" [id]=getidB(i,0,0)> <a [routerLink]="link.url" [id]="getidB(i,0,0)"> <i class="link.icon ? {{link.icon}} : null"></i> {{link.title}} </a> <ul *ngIf="link.items"> <li *ngFor="let link of link.items; let j=index;" [id]=getidB(i,j+1,0)> <a [routerLink]="link.url" [attr.target]="link.target ? link.target : null" [id]="getidB(i,j+1,0)"> <i class="link.icon ? {{link.icon}} : null"></i> {{link.title}} </a> <ul *ngIf="link.items"> <li *ngFor="let link of link.items; let k=index;" [id]=getidB(i,j+1,k+1)> <a [routerLink]="link.url" [attr.target]="link.target ? link.target : null" [id]="getidB(i,j+1,k+1)"> <i class="link.icon ? {{link.icon}} : null"></i> {{link.title}} </a> <ul *ngIf="link.items"> <li *ngFor="let link of link.items; let l=index;" [id]=getidB(i,j+1,k+1,l+1)> <a (click)="menuclick($event)" [routerLink]="link.url" [id]="getidB(i,j+1,k+1,l+1)"> {{link.title}} </a> </li> </ul> </li> </ul> </li> </ul> </li> </ul>
-
{{link.title}}
<ul *ngIf="link.items"> <li *ngFor="let link of link.items; let j=index;" [id]=getidB(i,j+1,0)> <a (click)="menuclick($event)" [routerLink]="link.url" [id]="getidB(i,j+1,0)"> {{link.title}} </a> <ul *ngIf="link.items"> <li *ngFor="let link of link.items; let k=index;" [id]=getidB(i,j+1,k+1,0)> <a (click)="menuclick($event)" [routerLink]="link.url" [id]="getidB(i,j+1,k+1,0)"> {{link.title}} </a> <ul *ngIf="link.items"> <li *ngFor="let link of link.items; let l=index;" [id]=getidB(i,j+1,k+1,l+1)> <a (click)="menuclick($event)" [routerLink]="link.url" [id]="getidB(i,j+1,k+1,l+1)"> {{link.title}} </a> </li> </ul> </li> </ul> </li> </ul> </li> </ul>
I am currently studying the web,
Please review.
Thank you.
