ng-matero / extensions

Angular Material Extensions Library.
https://ng-matero.github.io/extensions/
MIT License
393 stars 48 forks source link

[Grid][rowSelection] #164

Closed Ghez239 closed 1 year ago

Ghez239 commented 1 year ago

how can avoid row checked on operations button click?

nzbin commented 1 year ago

You can try the custom template. https://ng-matero.github.io/extensions/components/grid/overview#custom-cell-template-2

Ghez239 commented 1 year ago

i already did it but still not working, is there any other solution for this issue?

nzbin commented 1 year ago

Which version do you use? I tested with the following columns and I don't find any issues. Can you give me an online example?

columns: MtxGridColumn[] = [
  ...
  {
    header: 'operation',
    field: 'operation',
    type: 'button',
    buttons: [
      {
        type: 'basic',
        text: 'delete',
        click: () => alert('delete'),
      },
    ],
  },
]
Ghez239 commented 1 year ago

version: "13.0.1"

i have the following template:

{ 
  header: '',
  field: 'operations',
  width: '70px',
  pinned: 'right',
  right: '0px',
  type: 'button',
  buttons: [ ],
}

and this is my custom cell template in the html:

<mtx-grid class="mat-elevation-z2 producers-table"
                [cellSelectable]="false"
                [rowStriped]="true"
                [rowHover]="true"
                [pageOnFront]="false"
                [pageDisabled]="true"
                [columns]="rightColumns"
                [showPaginator]="false"
                [data]="producers || []"
                [cellTemplate]="{
                  operations: operationRightTpl
                }"
                [headerTemplate]="{operations: operationHeader}">
</mtx-grid>

<ng-template #operationRightTpl let-row>
  <div fxFill fxLayoutAlign="center center">
    <app-table-operations [operations]="rightTableOperationsMenu"
                          (buttonClickEvent)="handleRightOperation($event, row)">
    </app-table-operations>
  </div>
</ng-template>
nzbin commented 1 year ago

I tested without custom template and everything is OK. If you use custom template, you should add event.stopPropagation() in the handleRightOperation($event, row). Please give me a stackblitz demo with 13.0.1 to test if you still have questions.

Ghez239 commented 1 year ago

thank you, the solution with the stopPropagation works