Double Click on Kendo Grid row's for React Component

Question

I'm using the React Grid component and I'm looking for a way to fire a function when double click a row.

I found a rowClick function and I can use it now to select a row or handle an onClick event : <Grid rowClick={e => yourFunction(e)}> . But there is no function to handle a doubleClick event.

This is my approach, I passed a onDoubleClick() function as props to my component, and bind it with the listener of doubleClick on componentDidMount for each row :

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());
        }
      }
  }

For the moment this works but I'm not able to pass the clicked row data to my function. Is there any hack to retrieve the row's data using the element ? Like this for example : onDoubleClick(kendo.data.DataSource(rows[i])) => return the json data to function.

In the jquery version, you can do var item = grid.dataItem(grid.select()); where "grid" is a reference to the grid widget. I don't know if the react api is the same though. — snow_FFFFFF, May 11 '18 at 17:19

score 2 · Answer 1 · answered May 16 '18 at 15:07

The grid have a rowRender property, that can be used as a RenderProp for fully modifying the rows, including attaching them a rowClick using the native React approach.

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

You may find this live example for how to attach mouse mousedown, blur and focus for the GridRow in the InCell editing demo The same logic for the onDoubleClick can be used as in my code-snipped above.

Double Click on Kendo Grid row's for React Component

1 Answers1