No focus on row after Delete

[Christoph Manig]

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};

  }

[Kuralarasan Muthusamy]

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