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

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

• 

  arun.sunny

  • Post Options:
  • Link
    Copy

  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

  

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  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
• 

  arun.sunny

  • Post Options:
  • Link
    Copy

  Replied 24 February 2021, 3:00 am EST

  Thanks Sharad, it worked