Posted 7 December 2017, 3:53 am EST
Hello
I’ve added ccs but sometimes I see two scroll bars or empty space after last column/row.
Could you please fix my code?
Thanks in advance.
This is the code:
HTML:
<div id="flex" style="max-height:auto;overflow:auto;resize:both;padding:5px;height:150px;width:500px">
<wj-flex-grid *ngFor="let dataCollection of dataCollections;index as i;" [itemsSource]="dataCollections[i]">
<wj-flex-grid-filter #filter ></wj-flex-grid-filter>
<wj-flex-grid-column [header]="'Country'" [binding]="'country'" [width]="'*'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'Date'" [binding]="'date'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'Revenue'" [binding]="'amount'" [format]="'n0'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'Active'" [binding]="'active'"></wj-flex-grid-column>
</wj-flex-grid>
</div>
TS:
import * as wjcCore from 'wijmo/wijmo';
import * as wjcGrid from 'wijmo/wijmo.grid';
import * as wjcGridFilter from 'wijmo/wijmo.grid.filter';
import { Component, EventEmitter, Input, Inject, enableProdMode, NgModule, ViewChild } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { DataSvcService } from '../data.svc.service';
@Component({
selector: 'app-wg',
templateUrl: './wgrid.component.html',
styleUrls: ['./wgrid.component.css']
})
export class WGridComponent {
numOfGrids=1;
dataCollections = [];
countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
count = 301;
constructor() {
for(let i=0;i<this.numOfGrids;i++){
const wijmoArray = new wjcCore.ObservableArray();
this.dataCollections.push(new wjcCore.CollectionView(wijmoArray));
this.init(8, wijmoArray);
}
// setInterval(() => {
// this.dataCollections.forEach((dataCollection: wjcCore.CollectionView)=>{
// this.count++,
// this.getData(this.count, dataCollection.items);
// dataCollection.refresh();
// });
// }, 1000);
}
public init(count: number, data: any[]) {
for (var i = 0; i < count; i++) {
this.getData(i, data);
}
return data;
}
getData(i: number, data: any[]) {
data.unshift({
id: i,
country: this.countries[i % this.countries.length],
date: new Date(2014, i % 12, i % 28),
amount: Math.trunc(Math.random() * 10000),
active: i % 4 == 0
});
return data;
}
}
Best Regards
Mark Nebrat