akveo / ng2-smart-table

Angular Smart Data Table component
https://akveo.github.io/ng2-smart-table/
MIT License
1.63k stars 877 forks source link

ng2-smart-table right mouse click not working on list ? #1254

Open akramrana opened 3 years ago

akramrana commented 3 years ago

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

Untitled

akramrana commented 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',
    },
  ];
}
tofutim commented 3 years ago

This was more like icons that do actions. Were you ever able to figure out how to do the context menu?

nikita-fuchs commented 1 year ago

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>