Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
151393 | Feb 10,2020 01:54 PM UTC | Feb 12,2020 06:47 AM UTC | Angular - EJ 2 | 3 |
![]() |
Tags: Grid |
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 = "";
}
}} |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.