1. Home
  2. Forum
  3. Angular - EJ 2
  4. Grid keyboard actions on checkbox template and anchor template

Grid keyboard actions on checkbox template and anchor template

Hi! 
I created my own custom checkbox selection column in a data grid, here is the example: 

https://stackblitz.com/edit/angular-msunrc-lewqjl?file=app.component.html

I want now to achieve some keyboard quick actions:
1-Moving with the arrows in the grids cell, position on the checkbox, press Enter -> Check/Uncheck the current checkbox in the row firing the ejs-checkbox template.
2-Selecting a row (in any cell) pressing Alt+C -> Check/Uncheck the current checkbox in the row firing the ejs-checkbox template.
3-Moving with the arrows in the grids cell, position on the Anchor Template press Enter -> Fire (click) event on the Anchor (or another event). Now is firing if you press two times Enter, I want it in one.
4-Selecting a row (in any cell) pressing Alt+A ->  Fire (click) event on the Anchor (or another event).

Another weird behavior is when I move with arrows to the checkbox cell, I press Space and the checkbox is checked, but when I press Space again the checkbox doesn't get unchecked.

Thanks!

2 Replies 1 reply marked as answer
CS Cesar Smerling December 17, 2020 06:07 PM UTC

Hi!

There is some news about this ticket, I cannot get it working by own.

Thanks

AG Ajith Govarthan Syncfusion Team December 18, 2020 03:44 PM UTC

Hi Cesar, 
 
Thanks for contacting Syncfusion support. 
 
Query#1: 1-Moving with the arrows in the grids cell, position on the checkbox, press Enter -> Check/Uncheck the current checkbox in the row firing the ejs-checkbox template. 
2-Selecting a row (in any cell) pressing Alt+C -> Check/Uncheck the current checkbox in the row firing the ejs-checkbox template. 
 
Based on your requirement you want to check or uncheck the checkboxes with Alt+C and enter keys based on the focused element. So, we have prepared sample in that we have used the keydown event for the grid component. Using the keydown event we have checked and unchecked the checkboxes with Alt+C and enter key. 
 
Query#2: 3-Moving with the arrows in the grids cell, position on the Anchor Template press Enter -> Fire (click) event on the Anchor (or another event). Now is firing if you press two times Enter, I want it in one.-Selecting a row (in any cell) pressing Alt+A ->  Fire (click) event on the Anchor (or another event). 
 
We have also triggered the click event for the anchor tag element with Alt+A and enter keys using the keydown event based on the focused element. For your convenience we have attached the sample so please refer the sample for your reference. 
 
Code Example:sed  
App.component.ts 
 
export class AppComponent { 
  @ViewChild("grid", { static: false }) grid: GridComponent; 
  public data: Object[]; 
  public flag: boolean = true; 
  public selectOptions: Object; 
  public editSettings: Object; 
  public toolbar: string[]; 
  public pageSettings: any = { pageSize: 6 }; 
 
  allChecked = { 
    all: false, 
    indeterminate: false 
  }; 
 
  public ngOnInit(): void { 
    this.data = orderDetails.map((order, index) => { 
      return { ...order, id: index, checked: false }; 
    }); 
  } 
 
  onCheckedRowToggle(args, row: Object) { 
    const { checked } = args; 
    this.setCheckedStateToRow(row, checked); 
 
    this.emitCheckedRows(); 
 
    this.setCheckRowHeaderState(<Object[]>this.grid.dataSource); 
  } 
 
  dataBound(args) { 
    if (this.flag) { 
      this.grid.keyboardModule.keyConfigs["enter"] = ""; 
      this.flag = false; 
    } 
  } 
 
  public keyHandler(e) { 
    if (e.altKey) { 
      if (e.keyCode === 67) { 
        var ele = parentsUntil(e.target, "e-row", false); 
        if (ele) { 
          let cbox = ele.querySelector(".e-checkbox").ej2_instances[0]; 
          cbox.checked = !cbox.checked; 
        } 
      } 
      if (e.keyCode === 65) { 
        var ele = parentsUntil(e.target, "e-row", false); 
        if (ele) { 
          (ele.querySelector(".e-templatecls") as any).click(); 
        } 
      } 
    } 
 
    if (e.keyCode === 13) { 
      if (e.target.classList.contains("e-checkbox")) { 
        let cbox = e.target.ej2_instances[0]; 
        cbox.checked = !cbox.checked; 
      } 
      if (e.target.classList.contains(".e-templatecls")) { 
        e.target.click(); 
      } 
    } 
  } 
 
  onCheckHeaderToggle(args) { 
    const { checked } = args; 
    const dataSource = <Object[]>this.grid.dataSource; 
    dataSource.forEach(row => { 
      this.setCheckedStateToRow(row, checked); 
      row["checked"] = checked; 
    }); 
 
    this.emitCheckedRows(); 
 
    this.setCheckRowHeaderState(<Object[]>this.grid.dataSource); 
  } 
 
  private setCheckedStateToRow(row, checked) { 
    const index = this.grid.getRowIndexByPrimaryKey(row["id"]); 
    this.grid.setCellValue(row["id"], "checked", checked); 
    //this.grid.updateCell(index, "checked", checked); 
  } 
 
  private emitCheckedRows() { 
    const dataSource = <Object[]>this.grid.dataSource; 
    const checkedRows = dataSource.filter(rows => rows["checked"]); 
    //this.onCheckRow.emit(checkedRows); 
    console.log("CHEKED ROWS", checkedRows); 
  } 
 
  private setCheckRowHeaderState(rows: Object[]) { 
    const checkedRows = rows.filter(rows => rows["checked"]); 
    if (checkedRows.length === 0) { 
      this.allChecked = { 
        all: false, 
        indeterminate: false 
      }; 
    } else { 
      if (checkedRows.length === this.data.length) { 
        this.allChecked = { 
          all: true, 
          indeterminate: false 
        }; 
      } else { 
        this.allChecked = { 
          all: false, 
          indeterminate: true 
        }; 
      } 
    } 
  } 
 
  handleAnchor(args) { 
    console.log("ARGS", args); 
  } 
} 
 
 
 
Query#3: Another weird behavior is when I move with arrows to the checkbox cell, I press Space and the checkbox is checked, but when I press Space again the checkbox doesn't get unchecked. 
 
Currently we are validating this query at our end and we will update further details on 22nd December 2020. 
 
Until then we appreciate your patience. 
 
Regards, 
Ajith G. 


Marked as answer
Loader.
Up arrow icon