No focus on row after Delete

Thread ID:	Created:	Updated:	Platform:	Replies:
144097	Apr 18,2019 08:50 AM UTC	Apr 19,2019 12:15 PM UTC	Angular - EJ 2	1

Subscribe to this post

Tags: Grid

Christoph Manig

Asked On April 18, 2019 08:50 AM UTC

Hello,

I have implemented a table with multiple row selection per checkbox. When I select some rows and click on the delete button, the row of the last selected index is selected after the deletion. I want that no row is selected after I delete one or more rows. How can I solve this problem?

<ejs-grid

#grid

width="100%"

height="700"

[dataSource]="tableData"

[selectionSettings]='selectionOptions'

[editSettings]='editSettings'

[toolbar]='toolbar'

<e-columns>

<e-column type='checkbox' width='50'></e-column>

<e-column field="nationalitaetSv" headerText='Nationalitätenkennzeichen' [validationRules]="svRules"></e-column>

<e-column field="nationalitaetIso" headerText="ISO-Kennzeichen" [validationRules]="isoRules"></e-column>

<e-column field="nationalitaetTextKurz" headerText="Kurzbezeichnung" [validationRules]="kurzRules"></e-column>

<e-column field="nationalitaetTextLang" headerText="Langbezeichnung" [validationRules]="langRules"></e-column>

<e-column field="malus" headerText="Malus" [validationRules]="malusRules"></e-column>

<e-column field="prio" headerText="Priorität"></e-column>

<e-column field="schnellzugriff" headerText="Schnellzugriff" [displayAsCheckBox]="true"></e-column>

<e-column field="tastaturKuerzel" headerText="Tastaturkürzel"></e-column>

</e-columns>

</ejs-grid>

ngOnInit() {

this.tableData=data;

this.selectionOptions = { checkboxMode: 'ResetOnRowClick'};

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

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

this.svRules = { required: true};

this.isoRules = { required: true, minLength: 2, maxLength: 2};

this.kurzRules = { required: true};

this.langRules = { required: true};

this.malusRules = { required: true, number: true};

}

Reply | Reply with quote

Kuralarasan Muthusamy [Syncfusion]

Replied On April 19, 2019 12:15 PM UTC

Hi Christoph,

Thanks for contacting Syncfusion support.

From your query we found that you want to clear the selection from the Grid after complete the delete action. You can prevent this row selection by simply provide args.cancel as true in rowSelecting event of the Grid based on some conditions. Please refer the following code snippet,

HTML:

<ejs-grid #normalgrid id='Normalgrid' [dataSource]='data' allowPaging='true' (actionComplete)='actionComplete($event)' (rowSelecting)='rowSelecting($event)' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'>

<e-columns>

<e-column type="checkbox" width='140'></e-column>

</e-columns>

</ejs-grid>

TypeScript:

export class AppComponent {

public flag: boolean = false;

actionComplete(args) {

if (args.requestType == "delete") {

this.flag = true;

}

rowSelecting(args) {

if (this.flag) {

this.flag = false;

args.cancel = true;

}

We have prepared the sample with this requirement for your reference and you can find that sample from the below link,

Sample: https://stackblitz.com/edit/angular-b8hsdj?file=app.component.html

Regards,

Kuralarasan M

Reply | Reply with quote

No focus on row after Delete

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US