Дважды щелкните по строке решетки кендо для компонента React.

Question

Я использую компонент React Grid и ищу способ запуска функции при двойном щелчке по строке.

Я нашел rowClick функция, и теперь я могу использовать ее для выбора строки или обработки события onClick: <Grid rowClick={e => yourFunction(e)}>, Но нет функции для обработки события doubleClick.

Это мой подход, я прошел onDoubleClick() функционировать как реквизит моего компонента, и связать его со слушателем doubleClick на componentDidMount для каждого ряда:

componentDidMount() {
    let { onDoubleClick } = this.props;
      if (onDoubleClick) {
        const rows = document
          .getElementsByClassName('k-widget k-grid')[0]
          .getElementsByClassName('k-grid-table')[0]
          .getElementsByTagName('tbody')[0]
          .getElementsByTagName('tr');
        for (let i = 0; i < rows.length; i++) {
          rows[i].addEventListener('dblclick', () => onDoubleClick());
        }
      }
  }

На данный момент это работает, но я не могу передать данные по нажатой строке в мою функцию. Есть ли взломать, чтобы получить данные строки с помощью элемента? Например, вот так: onDoubleClick (kendo.data.DataSource (row [i])) => вернуть данные json в функцию.

Answer 1

Сетка имеет свойство rowRender, которое можно использовать в качестве RenderProp для полной модификации строк, включая прикрепление их к rowClick с использованием нативного подхода React.

rowRender(trElement, dataItem) {
    const trProps = {
        ...trElement.props,
        onDoubleClick: () => {
            //place your logic here
        }            
    };
    return React.cloneElement(trElement, { ...trProps }, trElement.props.children);
}

Вы можете найти этот живой пример того, как прикрепить мышь, размытие и фокус для GridRow в демонстрационной версии редактирования InCell. Та же логика для onDoubleClick может быть использована, как в моем фрагменте кода выше.