We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
App.component.ts
<ejs-grid #grid [dataSource]='data' [toolbar]='toolbar' id="gridcomp" allowPaging='true' allowSorting='true' [contextMenuItems]="contextMenuItems" [editSettings]='editing' (contextMenuOpen)='open($event)'>
<e-columns>
. . . . . . . .
</e-columns>
</ejs-grid>
<div>
<ejs-contextmenu #contextmenu target='.e-content' [items]='menuItems' (created)='onCreated()' (select)='select($event)'></ejs-contextmenu>
</div>
<div>
<ejs-contextmenu #headercontextmenu target='.e-gridheader' (beforeOpen)='beforeOpen()' [items]='headermenuItems' (select)='select($event)'></ejs-contextmenu>
</div> |
|
App.component.html
export class AppComponent {
public data: Object[];
@ViewChild('grid') public grid: GridComponent;
@ViewChild('contextmenu')
public contextmenu: ContextMenuComponent;
@ViewChild('headercontextmenu')
public headercontextmenu: ContextMenuComponent;
public toolbar: string[];
public menuItems: MenuItemModel[] = [
{
text: 'Save Grid Changes'
},
{
text: 'Print Preview'
},
{
text: 'Show Summary'
}];
public headermenuItems: MenuItemModel[] = [
{
text: 'Hide Column'
},
{
text: 'UnHide Column'
},
{
text: 'Column background color'
},
{
text: 'Reset color'
}];
public contextMenuItems: any;
public editing: EditSettingsModel;
beforeOpen(args): void {
if(this.grid.getColumnByField('ShipCountry').visible == true){ document.getElementById("unhide").style.display = "none";
document.getElementById("hide").style.display = "";
}
else{
document.getElementById("hide").style.display = "none";
document.getElementById("unhide").style.display = "";
}
}
select(args):void {
if(args.item.text === "Save Grid Changes") {
this.grid.editModule.batchSave();
}
if(args.item.text === 'Print Preview') {
this.grid.print();
}
if(args.item.text === 'Show Summary') {
this.grid.aggregates = [{
columns: [{
type: 'Sum',
field: 'Freight',
footerTemplate: 'Sum: ${Sum}'
}]
}]
}
if(args.item.text === 'Hide Column') {
this.grid.getColumnByField('ShipCountry').visible = false;
this.grid.refreshColumns();
}
if(args.item.text === 'UnHide Column') {
this.grid.getColumnByField('ShipCountry').visible = true;
this.grid.refreshColumns();
}
if(args.item.text === 'Column background color') {
(document.getElementsByClassName('e-headercell')[1] as any).style = "background-color: green";
}
if(args.item.text === 'Reset color') {
(document.getElementsByClassName('e-headercell')[1] as any).style.cssText = "";
}
}} |
