We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

No focus on row after Delete

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



1 Reply

KM Kuralarasan Muthusamy Syncfusion Team 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, 


Regards, 
Kuralarasan M 


Loader.
Live Chat Icon For mobile
Up arrow icon