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.
BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
|
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 = "";
}
}} |
