Show DataEditor on single-click or onSelect

[fredwh1te]

On each cell I am setting a custom valueViewer and dataEditor. Is there a way to display the dataEditor with a single click, instead of having to double click. Maybe another way of saying it is to display the dataEditor when the cell is selected.

[fredwh1te]

😢

[navidadelpour]

Hi @gnudle, You can have a button in your valueViewer to dispatch double click event on it self. here I've had a valueViewer component and inside of that i've created a dropdown icon with css on dropdown button click, you can dispatch the double click event with bubbles: true on the dropdown element itself.

function ValueViewer({ value }) {

  function onDropdownButtonClick(e) {
    e.target.dispatchEvent(new Event("dblclick", { bubbles: true }));
  }

  return (
    <span className="value-viewer">
      {value}
      <span className="dropdown-icon" onClick={onDropdownButtonClick}></span>
    </span>
  );
}

.dropdown-element {
  position: relative;

  .value-viewer .dropdown-icon::after {
    content: "\f0d7";
    font-family: Dropdown;
    font-size: .75rem;
    position: absolute;
    top: .7rem;
    right: .6rem;
    padding: 0 .5rem;
    color: #202833;
  }
}

[fredwh1te]

@navidadelpour Thank you. I should have thought of that! Thank you also for a great component.

[hamodey]

Hi @gnudle, You can have a button in your valueViewer to dispatch double click event on it self. here I've had a valueViewer component and inside of that i've created a dropdown icon with css on dropdown button click, you can dispatch the double click event with bubbles: true on the dropdown element itself.

function ValueViewer({ value }) {

  function onDropdownButtonClick(e) {
    e.target.dispatchEvent(new Event("dblclick", { bubbles: true }));
  }

  return (
    <span className="value-viewer">
      {value}
      <span className="dropdown-icon" onClick={onDropdownButtonClick}></span>
    </span>
  );
}

.dropdown-element {
  position: relative;

  .value-viewer .dropdown-icon::after {
    content: "\f0d7";
    font-family: Dropdown;
    font-size: .75rem;
    position: absolute;
    top: .7rem;
    right: .6rem;
    padding: 0 .5rem;
    color: #202833;
  }
}

Nice this worked perfectly!