Angular 4: WjFlexGrid Key Press event?

Posted by: frettarenan on 22 September 2017, 11:44 am EST

  • Posted 22 September 2017, 11:44 am EST

    Hi,


    I need to create a shortcut with the keyboard, so that the user can access a functionality of a button when that cell is selected. I did not find any event associated with shortcut keys.

    Look at the picture:



    The delete button is with tabindex = "- 1" for the tab key to not jump from button to button.
    I need to program an event in the cell (when it is selected), that when pressing space key or enter key, trigger the same button event.

    For example:

    onKeyPress(event:KeyBoardEvent) {
    if (dataGrid.selectedCol == 5 AND (event.key = Keyboard.ENTER OR event.key = Keyboard.SPACE) ) {
    sameAsEraseButton();
    }
    }

    Another thing:

    Notice that the columns name are shortened with "...", but tooltips with the full column name do not appear.
  • Replied 22 September 2017, 1:07 pm EST

    I was able to implement the key down. But I thought it was very intrusive.

    look (https://github.com/frettarenan/wijmo-angular-app):


    ngOnInit() {
    this.gridRegistroEntrada.hostElement.addEventListener('keydown', (e:KeyboardEvent) => {
    if (this.gridRegistroEntrada.selection.col == 9 && e.which == 32) {
    this.removeLinha(this.collectionView.items[this.gridRegistroEntrada.selection.row]);
    } else if (this.gridRegistroEntrada.selection.col == 4 && e.which == 32) {
    this.selecionaEmpenho(this.collectionView.items[this.gridRegistroEntrada.selection.row]);
    }
    });
    }

    Is this the good practice?
  • Replied 22 September 2017, 1:13 pm EST

    I have another small question of accessibility:
    when you navigate between HTML elements with the TAB key and set focus on the grid, it does not have a graphical representation that is selected by default.

    Is it possible to add a border when it is selected? Look my picture.
  • Replied 22 September 2017, 3:09 pm EST

    Hi,

    I implemented the above question in a bad way.

    look:


    <div #gridBorder>
    <wj-flex-grid #gridRegistroEntrada [itemsSource]="collectionView" (beginningEdit)="beginningEdit($event)" (gotFocus)="gotFocus()" (lostFocus)="lostFocus($event)">



    @ViewChild('gridRegistroEntrada') gridRegistroEntrada: wjcGrid.FlexGrid;
    @ViewChild('gridBorder') gridBorder: ElementRef;

    gotFocus(e:any) {
    this._renderer2.setStyle(this.gridBorder.nativeElement, 'border', '1px solid #afd9ee');
    }

    lostFocus(e:any) {
    this._renderer2.setStyle(this.gridBorder.nativeElement, 'border', 'none');
    }



    Is there a way to change the border color of the grid when it is selected and deselected?

    I have another small question of accessibility:

    You noticed that the grid selection is always selected, even when the grid is not selected.
    This selection of colors attracts a lot of user attention. Diverts your attention.
    My idea is that when the grid is not focused, there is a way to change the style of the selected cell to a more discreet color. And when the grid is selected, the color will regain its brightness.

    Is it possible to do this in a simple way?

    I am adept at clean code!
  • Replied 25 September 2017, 6:16 am EST

    Hi,

    For your first requirement, handling keydown/keypress event. Glad to know that you have resolved the issues yourself. The way you are handling keydown event, it is the recommended way.

    frettarenan said:
    Notice that the columns name are shortened with "...", but tooltips with the full column name do not appear.


    Are you using tooltip explicitly? As a default, no tooltip is shown if data is not displayed completely in cell.

    frettarenan said:
    Is it possible to add a border when it is selected?

    You can use "wj-state-focused" class for defining CSS for showing focused FlexGrid. This class gets added when FlexGrid gets focused.


    You make selection to null on FlexGrid lostFocus event by setting currentItem to null for CollectionView.

    Thanks,
    Manish Kumar Gupta
  • Replied 25 September 2017, 10:34 am EST

    Thank you, it worked.
    You can use "wj-state-focused" class for defining CSS for showing focused FlexGrid. This class gets added when FlexGrid gets focused.You make selection to null on FlexGrid lostFocus event by setting currentItem to null for CollectionView.

    This is not working for me.
    Are you using tooltip explicitly? As a default, no tooltip is shown if data is not displayed completely in cell.

    Look:


    I put the mouse over the header but the tooltip does not appear.
  • Replied 26 September 2017, 2:30 am EST

    Hi,
    You need to show tooltip for the desired cell on mousemove event using Tooltip class. As the default, no tooltip shown for FlexGrid.

    Thanks,
    Manish Kumar Gupta
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels