|
export class AppComponent {
public vData: Object[] = [];
@ViewChild('grid')
public grid: GridComponent;
public pageSettings: object = { pageSize: 50 };
public infiniteOptions: InfiniteScrollSettingsModel
= { initialBlocks: 1 };
editSettings = {
allowEditing: false,
allowAdding: true,
allowDeleting: true,
mode: 'Normal',
};
isInitialLoad = true;
gridName = 'grid12345';
columns = [];
columnMenuItems: any = [
'Filter',
{ text: 'Freeze column', id:
'freezecolumn' },
{ text: 'UnFreeze column', id:
'unfreezecolumn' },
];
public ngOnInit(): void {
this.renderColumns();
}
onClick
= (args: any) => {
getDatasource();
this.grid.dataSource =
this.vData = infiniteData;
this.grid.refresh();
};
onClick2 = (args: any) => {
this.grid.setRowData(2, { SNO: 2,
FIELD1: 'Updated' });
};
onClick3 = (args: any) => {
this.grid.setRowData(52, { SNO: 52,
FIELD1: 'Updated' });
};
renderColumns()
{
console.log('renderColumns');
this.columns = [];
const columnData = [
{
field: 'SNO',
visible: true,
isPrimaryKey:
true,
type: 'string',
clipMode:
'EllipsisWithTooltip',
},
{
field:
'FIELD1',
headerText:
'Player Name',
allowEditing:
true,
allowFiltering:
true,
type: 'string',
clipMode:
'EllipsisWithTooltip',
},
{
field:
'FIELD2',
headerText:
'Year',
allowEditing:
false,
allowFiltering:
true,
type: 'string',
clipMode:
'EllipsisWithTooltip',
},
{
field:
'FIELD3',
headerText:
'Stint',
allowEditing:
false,
allowFiltering:
true,
type: 'string',
clipMode:
'EllipsisWithTooltip',
},
];
columnData.forEach((item) => {
const column =
Object.assign({}, item);
this.columns.push(column);
});
}
columnMenuClick(args)
{
if (args.item.id === 'freezecolumn') {
this.grid.getColumnByField(args.column.field).isFrozen = true;
this.grid.allowGrouping =
!this.grid.isFrozenGrid();
this.grid.freezeRefresh();
} else if (args.item.id ===
'unfreezecolumn') {
this.grid.getColumnByField(args.column.field).isFrozen = false;
this.grid.allowGrouping =
!this.grid.isFrozenGrid();
this.grid.freezeRefresh();
}
}
}
|
