Selecting a row in a grid with a button

[Ismael Andrade]

Hello!

I have this grid. When i edit a row, i need to click 2x for select it and edit it.

I need to do the same when i click on the edit button. I need to select the row with the clicked button, but i don't know how to do it.

I try to use grid. selectRow(id), but it doesn't work.

Here is my html code:

<ejs-grid #gridAtendimentoMaterial [dataSource]='lista'

[editSettings]='editSettings' (actionBegin)="getEventGrid($event)" [selectionSettings]='selectionOptions'

[filterSettings]='filterSettings' [pageSettings]='pageSettings'

[allowFiltering]='true' [allowSorting]='true' [allowPaging]='true' [allowTextWrap]='false' width='100%' [height]='tamanho' hierarchyPrintMode='Expanded' clipMode='EllipsisWithTooltip'>

<e-columns>

<e-column field='' headerText='Ação'

[visible]='true' [showInColumnChooser]="true" width="100" [allowEditing]= 'false'>

<ng-template #template #editTemplate let-data>

<app-simple-button field='buttonEdit' estilo="med" id="editar-material" id="edit_icon" icone="edit" label="" (onClick)="editarMaterialNoAtendimento(data.index)" >

</app-simple-button>

</ng-template>

</e-column>

<e-column field='nomeMaterial' headerText='Descrição do Material'

[visible]='true' [showInColumnChooser]="true" width="240" [allowEditing]= 'false'>

<ng-template #template let-data>

<div class="truncate"><output>{{ (data['nomeMaterial'] !== undefined) ? data['nomeMaterial'] : '' }}</output></div>

</ng-template>

</e-column>

<e-column field='qtdeFaturamento' headerText='Qtde Faturamento' [visible]='true' [showInColumnChooser]="true" width="160">

<ng-template #template let-data>

<output class="texto-listas-grid">{{ data.qtdeFaturamento }}</output>

</ng-template>

</e-column>

<e-column field='quantidadeUtilizada' headerText='Qtde Utilizada' [visible]='true' [showInColumnChooser]="true" width="150">

<ng-template #template let-data>

<output class="texto-listas-grid" >{{ data.quantidadeUtilizada }}</output>

</ng-template>

</e-column>

<e-column field='observacao' headerText='Observação' [visible]='true' [showInColumnChooser]="true" width="130">

<ng-template #template let-data>

<output class="texto-listas-grid">{{ data.observacao }}</output>

</ng-template>

</e-column>

<e-column field='nomeUnidade' headerText='Unidade' [visible]='true' [showInColumnChooser]="true" width="100" [allowEditing]= 'false'>

<ng-template #template let-data>

<output class="texto-listas-grid">{{ data.nomeUnidade }}</output>

</ng-template>

</e-column>

<e-column field='preco' headerText='Valor Unitário' [visible]='true' [showInColumnChooser]="true" width="160" [allowEditing]= 'false'>

<ng-template #template let-data>

<output class="texto-listas-grid">{{ data.preco | currency: 'BRL'}}</output>

</ng-template>

</e-column>

<e-column field='acessorio' headerText='Acessório' [visible]='true' [showInColumnChooser]="true" width="130" [allowEditing]= 'false'>

<ng-template #template let-data>

<output class="texto-listas-grid">{{ data.acessorio }}</output>

</ng-template>

</e-column>

<e-column field='faturarClinica' headerText='Fat. Clínica' [visible]='true' [showInColumnChooser]="true" width="130" [allowEditing]= 'false'>

<ng-template #template let-data>

<output class="texto-listas-grid">{{ data.faturarClinica }}</output>

</ng-template>

</e-column>

<e-column field='nomeFornecedor' headerText='Fornecedor' [visible]='true' [showInColumnChooser]="true" width="180" [allowEditing]= 'false'>

<ng-template #template let-data>

<output class="texto-listas-grid">{{ data.nomeFornecedor }}</output>

</ng-template>

</e-column>

<e-column field='numeroNota' headerText='Nº da Nota' [visible]='true' [showInColumnChooser]="true" width="140" [allowEditing]= 'false'>

<ng-template #template let-data>

<output class="texto-listas-grid">{{ data.numeroNota }}</output>

</ng-template>

</e-column>

<e-column field='lote' headerText='Lote' [visible]='true' [showInColumnChooser]="true" width="100" [allowEditing]= 'false'>

<ng-template #template let-data>

<output class="texto-listas-grid">{{ data.lote }}</output>

</ng-template>

</e-column>

<e-column field='data' headerText='Data Validade' [visible]='true' [showInColumnChooser]="true" width="130" [allowEditing]= 'false'>

<ng-template #template let-data>

<output class="texto-listas-grid">{{ data.data | date: 'dd/MM/yyyy' }}</output>

</ng-template>

</e-column>

<e-column field='usuarioAlterou' headerText='Usuário Alterou' [visible]='true' [showInColumnChooser]="true" width="180" [allowEditing]= 'false'>

<ng-template #template let-data>

<output class="texto-listas-grid">{{ data.usuarioAlterou }}</output>

</ng-template>

</e-column>

<e-column field='usuarioIncluiu' headerText='Usuário Incluiu' [visible]='true' [showInColumnChooser]="true" width="180" [allowEditing]= 'false'>

<ng-template #template let-data>

<output class="texto-listas-grid">{{ data.usuarioIncluiu }}</output>

</ng-template>

</e-column>

<e-column field='qtdRejeito' headerText='Qtde Rejeitada' [visible]='true' [showInColumnChooser]="true" width="160" [allowEditing]= 'false'>

<ng-template #template let-data>

<output class="texto-listas-grid">{{ data.qtdRejeito }}</output>

</ng-template>

</e-column>

<e-column field='motivoRejeito' headerText='Motivo Rejeição' [visible]='true' [showInColumnChooser]="true" width="160" [allowEditing]= 'false'>

<ng-template #template let-data>

<output class="texto-listas-grid">{{ data.motivoRejeito }}</output>

</ng-template>

</e-column>

</e-columns>

</ejs-grid>

Here is button method:

editarMaterialNoAtendimento(index:number){

console.log('index ', index);

let grid = this.grid;

grid.selectRow(index);

if(!this.editando){

this.atualizar();

}else{

this.finalizarEdicao();

}

}

editarMaterial(data){

this.eventoSync.emit({status:'editou', data: data})

}

atualizar(){

this.iniciarEdicao();

}

/* Invocar eventos da Grid */

finalizarEdicao(){

this.grid.endEdit();

}

iniciarEdicao(){

this.grid.startEdit();

}

cancelarEdicao(){

this.grid.closeEdit();

}

refresh(){

this.grid.refresh();

}

[Ismael Andrade]

When i use grid.selectRows, it works and i can save my data in my backend:

editarMaterialNoAtendimento(index:number){

console.log('index ', index);

this.grid.selectRows([index]);

if(!this.editando){

this.atualizar();

}else{

this.finalizarEdicao();

}

}

But, i'm getting this error:

[Ajith Govarthan]

Hi Ismael, 

Thanks for contacting Syncfusion support. 

Based on your query, you want to edit the Grid rows with single click in your Grid application. So, we have shared the documentation in that we have used the mouseup event and startEdit method to edit the grid rows in single click.  Please refer the below documentation for your reference. 

Code Example: 

App.component.ts 

import { Component, OnInit, ViewChild } from '@angular/core'; 

import { EditSettingsModel, ToolbarItems, GridComponent } from '@syncfusion/ej2-angular-grids'; 

import { MouseEventArgs } from '@syncfusion/ej2-base'; 

import { data } from './datasource'; 

@Component({ 

    selector: 'app-root', 

    template: `<ejs-grid #grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' allowPaging='true' (load)='load($event)'> 

                <e-columns> 

                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100 isPrimaryKey='true'></e-column> 

                    <e-column field='CustomerID' headerText='Customer ID' width=120></e-column> 

                    <e-column field='Freight' headerText='Freight' textAlign= 'Right' width=120 format= 'C2'></e-column> 

                    <e-column field='ShipCountry' headerText='Ship Country' width=150></e-column> 

                </e-columns> 

                </ejs-grid>` 

}) 

export class AppComponent implements OnInit { 

    public data: object[]; 

    public toolbar: ToolbarItems[]; 

    @ViewChild('grid') 

    public grid: GridComponent; 

    public editSettings: EditSettingsModel; 

    ngOnInit(): void { 

        this.data = data; 

        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' }; 

        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; 

    } 

    load(args){ 

        this.grid.element.addEventListener('mouseup', (e: MouseEventArgs) => { 

        if ((e.target as HTMLElement).classList.contains("e-rowcell")) { 

        if (this.grid.isEdit) 

            this.grid.endEdit(); 

            let index: number = parseInt((e.target as HTMLElement).getAttribute("Index")); 

            this.grid.selectRow(index); 

            this.grid.startEdit(); 

        }; 

        }); 

    } 

} 

UG-Link: https://ej2.syncfusion.com/angular/documentation/grid/how-to/enable-editing-in-single-click/#normal-editing 

Note: By default, in our EJ2 Grid we have feature called command buttons using the default command buttons you can perform the edit operations easily in single click of the edit command button. For your convenience we have attached the sample and documentation please refer them for your reference. 

Sample Link: https://stackblitz.com/edit/angular-jgc2kw?file=app.component.ts 

UG-link: https://ej2.syncfusion.com/angular/documentation/grid/edit/#command-column 

Please get back to us if you need further assistance. 

Regards, 

Ajith G. 

[Ajith Govarthan]

Hi Ismael, 

Thanks for contacting Syncfusion support. 

Based on your query, you want to edit the Grid rows with single click in your Grid application. So, we have shared the documentation in that we have used the mouseup event and startEdit method to edit the grid rows in single click.  Please refer the below documentation for your reference. 

Code Example: 

App.component.ts 

import { Component, OnInit, ViewChild } from '@angular/core'; 

import { EditSettingsModel, ToolbarItems, GridComponent } from '@syncfusion/ej2-angular-grids'; 

import { MouseEventArgs } from '@syncfusion/ej2-base'; 

import { data } from './datasource'; 

@Component({ 

    selector: 'app-root', 

    template: `<ejs-grid #grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' allowPaging='true' (load)='load($event)'> 

                <e-columns> 

                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100 isPrimaryKey='true'></e-column> 

                    <e-column field='CustomerID' headerText='Customer ID' width=120></e-column> 

                    <e-column field='Freight' headerText='Freight' textAlign= 'Right' width=120 format= 'C2'></e-column> 

                    <e-column field='ShipCountry' headerText='Ship Country' width=150></e-column> 

                </e-columns> 

                </ejs-grid>` 

}) 

export class AppComponent implements OnInit { 

    public data: object[]; 

    public toolbar: ToolbarItems[]; 

    @ViewChild('grid') 

    public grid: GridComponent; 

    public editSettings: EditSettingsModel; 

    ngOnInit(): void { 

        this.data = data; 

        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' }; 

        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; 

    } 

    load(args){ 

        this.grid.element.addEventListener('mouseup', (e: MouseEventArgs) => { 

        if ((e.target as HTMLElement).classList.contains("e-rowcell")) { 

        if (this.grid.isEdit) 

            this.grid.endEdit(); 

            let index: number = parseInt((e.target as HTMLElement).getAttribute("Index")); 

            this.grid.selectRow(index); 

            this.grid.startEdit(); 

        }; 

        }); 

    } 

} 

UG-Link: https://ej2.syncfusion.com/angular/documentation/grid/how-to/enable-editing-in-single-click/#normal-editing 

Note: By default, in our EJ2 Grid we have feature called command buttons using the default command buttons you can perform the edit operations easily in single click of the edit command button. For your convenience we have attached the sample and documentation please refer them for your reference. 

Sample Link: https://stackblitz.com/edit/angular-jgc2kw?file=app.component.ts 

UG-link: https://ej2.syncfusion.com/angular/documentation/grid/edit/#command-column 

Please get back to us if you need further assistance. 

Regards, 

Ajith G.