How to disable Keyboard events for TreeGrid?

[Shreekumar]

I'm using Angular Version of TreeGrid. In which, some of the rows are not grouped and when I select a row and apply a keyboard event on such rows I'm getting following error:

How to disable Keyboard events for TreeGrid?

main.0c3400941a0a4d3d3ebf.js:1 TypeError: Cannot read property 'rowIndex' of undefined

    at t.getCollapseExpandRecords (main.0c3400941a0a4d3d3ebf.js:1)

    at t.expandRow (main.0c3400941a0a4d3d3ebf.js:1)

    at t.expandCollapseAll (main.0c3400941a0a4d3d3ebf.js:1)

    at t.expandAll (main.0c3400941a0a4d3d3ebf.js:1)

    at t.treeGridkeyActionHandler (main.0c3400941a0a4d3d3ebf.js:1)

    at HTMLElement.r.keyPressHandler (main.0c3400941a0a4d3d3ebf.js:1)

    at e.invokeTask (polyfills.73b3aeabbeaddf4bfcc2.js:1)

    at Object.onInvokeTask (main.0c3400941a0a4d3d3ebf.js:1)

    at e.invokeTask (polyfills.73b3aeabbeaddf4bfcc2.js:1)

    at t.runTask (polyfills.73b3aeabbeaddf4bfcc2.js:1)

[Gowri Loganathan]

Hi Shreekumar, 

Thanks for contacting Syncfusion Support. 

Query: How to disable Keyboard events for TreeGrid? 

We have analysed your query at our end and we suggest you to give allowKeyboard:false in the load event to disable the keyboard events for TreeGrid. 

Please refer to the below code snippet:- 

 

…………… 

@Component({ 

    selector: 'app-container', 

    template: `<ejs-treegrid [dataSource]='data'  (load)='load($event)' [treeColumnIndex]='1' childMapping='subtasks'> 

                <e-columns> 

                    <e-column field='taskID' headerText='Task ID' textAlign='Right' width=70></e-column> 

                    <e-column field='taskName' headerText='Task Name' textAlign='Left' width=200></e-column> 

                    <e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=90></e-column> 

                    <e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column> 

                </e-columns> 

                </ejs-treegrid>` 

}) 

.. . .  .  . .. . . . . . . 

       //Define load event// 

 

    load(args:Object){ 

        var treegrid=document.getElementsByClassName("e-treegrid")[0].ej2_instances[0]; 

        treegrid.allowKeyboard=false; 

    } 

  

} 

Kindly refer the below sample link and API link: 

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

Load event : https://ej2.syncfusion.com/angular/documentation/api/treegrid/#load 

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

Regards,
Gowri V L. 

[Aurelien]

Hi,

It is possible to just disable specific key ? (all the arrows for example)

[Pon Selva Jeganathan]

Hi Aurelien,

To achieve your requirement(disable specific key action in treegrid), we suggest you to use the load event of the TreeGrid, the keyPressed event of the grid.  

In the load event, we obtain the instance of the TreeGrid and use a keyPressed function of the grid. Within this function, we prevent the arrow keys action of tree grid.

Refer to the below code snippet,

 

<ejs-treegrid

      #treegrid

      [dataSource]="data"

      childMapping="subtasks"

      [treeColumnIndex]="1"

      [editSettings]="editSettings"

      (load)="load($event)"

      height="900"

    >

 

 load(args) {

    //bind keypressed event

    this.treegrid.grid.keyPressed = this.keypressed;

  }

  keypressed(args) {

    //here prevent key action based on condition

    if (

      args.key == 'ArrowDown' ||

      args.key == 'ArrowUp' ||

      args.key == 'ArrowLeft' ||

      args.key == 'ArrowRight'

    ) {

      args.cancel = true;

    }

 

 

 

Refer to the below sample,

https://stackblitz.com/edit/angular-7xpar2-dwva3q?file=src%2Fapp.component.html

Refer to the below API documentation,

https://ej2.syncfusion.com/angular/documentation/api/treegrid/#load

https://ej2.syncfusion.com/angular/documentation/api/grid#keypressed

Kindly get back to us for further assistance.

Regards,

Pon selva