How to disable key press in Angular's ListView

[Alireza Kahaei]

Hi,

you have mentioned that you support the keypress on Angular's ListViewhere. How can I disable the support of keypress altogether while still having the background color of the item selected darker than the other items?

The background color of the item selected is changed with the following CSS:

.e-list-item.e-active{

background-color:lightgray;

border-bottom:1pxsolidblack;

}

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Alireza, 

  

Greetings from Syncfusion support. 

  

Solution for Query 1(Prevent keyboard interaction):  

  

We have checked your reported query to prevent the keyboard action in EJ2 ListView component. You can prevent this key action by binding the keydown() event for ListView component. 

  

Refer the below code sample. 

  

 <ejs-listview id='sample-list-flat' [dataSource]='data' (keydown)="keydown($event)"></ejs-listview> 

  

keydown(event) { 

       event.stopImmediatePropagation(); 

    } 

 

  

Query 2(Change the color of selected items): 

  

Yes, you can change the color of selected items using referred CSS Styles. In ListView component, ‘e-active’ class will be available in the selected items. Using this class, you can change the color based on your requirement. 

  

Refer the below code sample. 

 

 <style> 

  .e-listview .e-list-item.e-active { 

    background-color: blue; 

  } 

</style> 

 

  

Refer the below sample link for your reference. 

  

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

  

Please let us know, if you need any further assistance. 

  

Regards, 

Shameer Ali Baig S. 

[Rama Prabha]

Hai,

How to disable delete key(keyboard) in treegrid(angular)?

I tried with :

1.event.stopImmediatePropagation();

2.event.preventDefault();

3. (or simply) return false;

nothing had worked as expected.

Regards

Rama.

[Farveen Sulthana Thameeztheen Basha]

  

Hi Rama, 

Query#:-How to disable delete key(keyboard) in treegrid(angular)? 

You can disable the default keyboard actions for particular keys in the TreeGrid. This can be achieved by removing the key configuration for the delete key from the grid’s keyBoardModule with DataBound event of TreeGrid. 

Refer to the below:- 

App.Component.html:- 

<ejs-treegrid 

    #treegrid 

    [dataSource]="data" 

    height="400" 

    childMapping="subtasks" 

    [treeColumnIndex]="1" 

    [editSettings]="editSettings" 

    [toolbar]="toolbar" 

    (dataBound)="dataBound($event)" 

  > 

    <e-columns> 

      <e-column 

        field="taskID" 

        headerText="Task ID" 

        isPrimaryKey="true" 

        width="90" 

        textAlign="Right" 

        [validationRules]="taskidrules" 

      ></e-column> 

        .  .    . 

   </e-columns> 

  </ejs-treegrid> 

 

App.component.ts 

dataBound(args) { 

    if (this.flag) { 

      // Removing key configuration for delete key 

      this.treegrid.grid.keyboardModule.keyConfigs['delete'] = ''; 

      this.flag = false; 

    } 

  } 

 

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

API link:- https://ej2.syncfusion.com/angular/documentation/api/treegrid/#databound 

 

Please get back to us if you need any further assistance. 

 

Regards, 

Farveen sulthana T 

[Rama Prabha]

Hai  Farveen sulthana T ,

The given solution worked perfectly. The issue has been resolved. Thank you for your help.

Regards

Rama

[Farveen Sulthana Thameeztheen Basha]

Hi Rama, 

Thanks for your update. We are glad to know that your reported problem has been resolved.Please get back to us if you need any further assistance. We are happy to assist you. 

Regards, 

Farveen sulthana T