How can I open dropdown inside a wijmo felxgid using spacebar key press

Posted by: arun.sunny on 22 February 2021, 8:45 pm EST

  • Posted 22 February 2021, 8:45 pm EST

    Hi team,

    I am using wijmo flexgrid to load and edit array of data.
    I have a dropdown column in the table.
    As per requirement, I need to open the dropdown inside the cell using spacebar keypress. From API I understood I can open dropdown using F4 and Alt & down arrow.

    Could someone guide me on this?

    Thanks
    Arun Sunny
  • Marked as Answer

    Replied 24 February 2021, 12:11 am EST

    Hi Arun,

    To achieve the required functionality, you may handle the keydown event and simulate 'F4' key press on space. Please refer to the following code snippet and the sample demonstrating the same:
    grid.hostElement.addEventListener(
    "keydown",
    function (e) {
    // spcae key
    if (e.keyCode !== 32 || grid.editRange) {
    return;
    }

    // check if single cell is selected
    let sel = grid.selection;
    if (!sel.isSingleCell) {
    return;
    }

    // get cell
    let cellEl = grid.cells.getCellElement(sel.row, sel.col);
    if (!cellEl) {
    grid.scrollIntoView(sel.row, sel.col, true);
    cellEl = grid.cells.getCellElement(sel.row, sel.col);
    }

    // check if cell has dropdown
    let dropDownToggleButton = cellEl.querySelector(".wj-elem-dropdown");
    if (dropDownToggleButton) {
    grid.hostElement.dispatchEvent(
    new KeyboardEvent("keydown", { keyCode: 115 })
    );
    e.preventDefault();
    }
    },
    true
    );

    https://codesandbox.io/s/wijmo-starter-forked-2qsuj?file=/src/index.js

    Regards
    Sharad
  • Replied 24 February 2021, 3:00 am EST

    Thanks Sharad, it worked
Need extra support?

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

Learn More

Forum Channels