Here is our extension table .ts…
import { Component, forwardRef } from ‘@angular/core’;
import { WjFlexGrid, wjFlexGridMeta } from ‘wijmo/wijmo.angular2.grid’;
import * as wjGrid from ‘wijmo/wijmo.grid’;
import * as wjCore from ‘wijmo/wijmo’;
@Component({
selector: ‘wat-flexgrid’,
templateUrl: ‘./wat-flexgrid.component.html’,
inputs: […wjFlexGridMeta.inputs, ‘rowToSelect’, ‘fromOnGridInit’, ‘restoreSelectionMode’],
outputs: […wjFlexGridMeta.outputs],
providers: [
{ provide: ‘WjComponent’, useExisting: forwardRef(() => WatFlexGridComponent) },
…wjFlexGridMeta.providers
]
})
export class WatFlexGridComponent extends WjFlexGrid
{
rowToSelect = 0;
fromOnGridInit = false;
restoreSelectionMode = null;
created()
this.allowSorting = false;
}
onFormatItem(e: wjGrid.FormatItemEventArgs)
{
// Remove padding when editing cells
if (e.cell.children[0] instanceof HTMLInputElement)
{
e.cell.style.padding = '0px';
}
}
onLoadedRows(e?: wjCore.EventArgs): void
{
//If we don't have any rows, get out
if (this.rows == null || this.rows.length === 0)
{
return;
}
//If the specified row to select doesn't exist, select the last row
//because it probably means we just deleted the (previous) last row
if (this.rows[this.rowToSelect] == null)
{
this.rowToSelect = this.rows.length - 1;
}
//The main reason to have onLoadedRows is to select a specified row
this.selectRow();
//Some components use the fromOnGridInit flag and it needs to be reset
this.fromOnGridInit = false;
//Some components turn off selection mode, and it needs to be restored
if (this.restoreSelectionMode != null)
{
this.selectionMode = this.restoreSelectionMode;
this.restoreSelectionMode = null;
}
}
selectRow()
{
this.scrollIntoView(this.rowToSelect, 0);
this.select(this.rowToSelect, 0);
}
}
And the .html…
<ng-template wjFlexGridCellTemplate [cellType]=“‘RowHeader’” let-cell=“cell”>
{{cell.row.index+1}}
And the .html when using our new table…
<wat-flexgrid #rsnflex
selectionMode="Row"
[itemsSource]="data"
(cellEditEnded)="onCellEditEnded($event)"
(selectionChanged)="onSelectionChanged($event)"
id="tableInjections">
</wat-flexgrid>
So as you can see we use a template to show the row number in out table and I want to override this when we use the table. If in the .ts file for this I use an itemFormatter then I can get something near to what I want but I would like the column to get bigger based on the HTML being used not a defaultSize (or am I not understanding what defaultSize is?). The reason I ask is because if I set the defaultSize to 25 and the number of data rows to 200…the numbers and/or the ‘s’ get cutoff…how do I get it to grow to the data?
