Open akramrana opened 3 years ago
Due to no reply, i made the following changes as per my need in TbodyCustomComponent class i made the below changes
import { Row } from '../../../lib/data-set/row';
import { Grid } from '../../../lib/grid';
@Component({
selector: 'ng2-st-tbody-custom',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<span *ngFor="let action of grid.getSetting('actions.custom')">
<a *ngIf="action.type==undefined || action.type!='link'" href="#" class="ng2-smart-action ng2-smart-action-custom-custom" [innerHTML]="action.title" (click)="onCustom(action, $event)"></a>
<a *ngIf="action.type!=undefined && action.type=='link'" [routerLink]="[action.url+'/'+row.getData().id]" class="ng2-smart-action ng2-smart-action-custom-custom" [innerHTML]="action.title"></a>
</span>`
})
export class TbodyCustomComponent {
@Input() grid: Grid;
@Input() row: Row;
@Input() source: any;
@Output() custom = new EventEmitter<any>();
onCustom(action: any, event: any) {
event.preventDefault();
event.stopPropagation();
this.custom.emit({
action: action.name,
data: this.row.getData(),
source: this.source
});
}
log(item) {
console.log(item)
}
}
use case will be
import { Component } from '@angular/core';
@Component({
selector: 'basic-example-data',
template: `
<ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>
`,
})
export class BasicExampleDataComponent {
settings = {
columns: {
id: {
title: 'ID',
},
name: {
title: 'Full Name',
},
username: {
title: 'User Name',
},
email: {
title: 'Email',
},
},
actions:{
custom: [
{
name: 'viewAction',
title: '<i class="ion-ios-eye-outline" title="View"></i>',
type:"link",
url:"examples/using-filters"
},
{
name: 'editAction',
title: 'CEdit ',
type:"link",
url:"examples/using-filters"
},
],
}
};
data = [
{
id: 1,
name: 'Leanne Graham',
username: 'Bret',
email: 'Sincere@april.biz',
},
{
id: 2,
name: 'Ervin Howell',
username: 'Antonette',
email: 'Shanna@melissa.tv',
},
{
id: 3,
name: 'Clementine Bauch',
username: 'Samantha',
email: 'Nathan@yesenia.net',
},
{
id: 4,
name: 'Patricia Lebsack',
username: 'Karianne',
email: 'Julianne.OConner@kory.org',
},
{
id: 5,
name: 'Chelsey Dietrich',
username: 'Kamren',
email: 'Lucio_Hettinger@annie.ca',
},
{
id: 6,
name: 'Mrs. Dennis Schulist',
username: 'Leopoldo_Corkery',
email: 'Karley_Dach@jasper.info',
},
{
id: 7,
name: 'Kurtis Weissnat',
username: 'Elwyn.Skiles',
email: 'Telly.Hoeger@billy.biz',
},
{
id: 8,
name: 'Nicholas Runolfsdottir V',
username: 'Maxime_Nienow',
email: 'Sherwood@rosamond.me',
},
{
id: 9,
name: 'Glenna Reichert',
username: 'Delphine',
email: 'Chaim_McDermott@dana.io',
},
{
id: 10,
name: 'Clementina DuBuque',
username: 'Moriah.Stanton',
email: 'Rey.Padberg@karina.biz',
},
{
id: 11,
name: 'Nicholas DuBuque',
username: 'Nicholas.Stanton',
email: 'Rey.Padberg@rosamond.biz',
},
{
id: 12,
name: 'Nicholas Rana',
username: 'Nicholas.Rana',
email: 'Rey.Padberg@rana.biz',
},
];
}
This was more like icons that do actions. Were you ever able to figure out how to do the context menu?
This is the way to do it:
use the rowHover
input to get the data of the row you are currently hovering, and the contextMenu
event on the smart table to trigger the displaying of a custom context menu. I used this one: Article Git Repo (in case the paywall kicks in and you don't have Onion/VPN)
<ng2-smart-table (contextmenu)="openMenu()"
[settings]="resultTableSettings"
[source]="searchResults"
(userRowSelect)="onUserRowSelect($event)"
(rowHover)="setActiveRowForContextMenu($event)"
></ng2-smart-table>
Right mouse click not working on custom actions button. does this feature available ? could not find anything like this. in some circumstance we need to open specefic list or row in browser separate tab or new browser window. any help would be greatly appreciated Thanks