Двойной щелчок по строке решетки кендо для компонента React - PullRequest
Новая
       35

Двойной щелчок по строке решетки кендо для компонента React

0 голосов
/ 11 мая 2018

Я использую компонент 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 в функцию.

1 Ответ

0 голосов
/ 16 мая 2018

Сетка имеет свойство 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 может быть использована, как в моем фрагменте кода выше.

...