JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Table how in component.ts work with events onclick ?

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #107452
    Andy Ristar
    Participant

    i have table with button edit and delete.  i want when i click on element delete_forever – send api http

    this code in meeting.component.html
    <smart-table #grid id="grid"  [dataSource]="dataSource"
                 [paging]="meetingsDataSettings.paging" [sortMode]="meetingsDataSettings.sortMode"
                 [tooltip]="meetingsDataSettings.tooltip" [onInit]="meetingsDataSettings.onInit"
                 [columns]="meetingsDataSettings.columns" [filtering]="meetingsDataSettings.filtering"
                 [filterRow]="meetingsDataSettings.filterRow" [pageIndex]="meetingsDataSettings.pageIndex" [pageSize]= "meetingsDataSettings.pageSize"
                 [selection]="meetingsDataSettings.selection" [editing]="meetingsDataSettings.editing"
                 (onCellEndEdit)="onItemAfterEdit($event)"
    ></smart-table>

     

    this code in meeting.component.ts    How in this place work with events onclick ? i have table with button edit and delete.
    columns: [
      { label: 'id', dataField: 'id', dataType: 'number', responsivePriority: 3, width: 50 },
      { label: 'Дата собрания', dataField: 'meetingDate', dataType: 'string', responsivePriority: 3 },
      { label: 'Адрес', dataField: 'address', dataType: 'string', responsivePriority: 4 },
      { label: 'Инициатор', dataField: 'initiator', dataType: 'string' },
      { label: 'Кол-во собственников', dataField: 'ownerCount', dataType: 'number' },
      { label: 'Кол-во вопросов', dataField: 'questionCount', dataType: 'number', responsivePriority: 3 },
      { label: 'Статус собрания', dataField: 'meetingStatus', dataType: 'number', responsivePriority: 3 },
      { label: 'Статус оплаты', dataField: 'paymentStatus', dataType: 'number', responsivePriority: 3 },
      { label: 'Комментарий', dataField: 'comment', dataType: 'string', responsivePriority: 3 },
      {
        label: '', dataField: 'action', allowEdit: false, width: 90,
        formatFunction: function (settings: any) {
          settings.template = '' +
            '<div class="actions-container">' +
               '' +
               '<i class="material-icons">edit</i>' + ''
            +
            '' +
            '<i class="material-icons">delete_forever</i>' + ''
          + '</div>';
        }
      },
    ],
    
    and i have meetingService.ts.  This meetingService.ts have http method getMeetings 
    
    FOR example
    getMeetings (): Observable<any> {
      return this.http.get(this.meetingsUrl)
        .pipe(
          catchError(this.handleError('getMeetings', []))
        );
    }
    
    delete (): Observable<any> { some action ); }
    
    
    • This topic was modified 11 months, 2 weeks ago by Andy Ristar.
    • This topic was modified 11 months, 2 weeks ago by Andy Ristar.
    #107455
    ivanpeevski
    Participant

    Hi Andy,

     

    Please see the demo here  – https://www.htmlelements.com/demos/table/server-side-crud/

    It shows you how to capture the click of a button inside a row. It can be achieved with event.target.closest()

     

    Best Regards,
    Ivan Peevski
    Smart UI Team
    https://www.htmlelements.com/

     

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.