Render Tooltips for Grid Cells
Environment
Product | Progress® KendoReact |
Description
How can I render a KendoReact Tooltip inside a KendoReact Grid?
Solution
Add titles to the cells of the Grid by setting the cell
and headerCell
properties.
- Example
- View Source
- Open In Stackblitz
- main.jsx
- products.json
import React from 'react';
import ReactDOM from 'react-dom';
import { Tooltip } from '@progress/kendo-react-tooltip';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
import products from './products.json';
class ProductNameCell extends React.Component {
render() {
return (
<td title={this.props.dataItem.ProductName}>
{this.props.dataItem.ProductName}
</td>
);
}
}
class ProductNameHeader extends React.Component {
render() {
return (
<a className="k-link" onClick={this.props.onClick}>
<span title={this.props.title}>{this.props.title}</span>
{this.props.children}
</a>
);
}
}
class App extends React.Component {
render() {
return (
<div>
<Tooltip openDelay={100} position="right" anchorElement="element">
<Grid
style={{ height: '400px' }}
data={products}
>
<GridColumn field="ProductID" title="ID" width="40px" />
<GridColumn field="ProductName" title="Product Name" width="250px" cell={ProductNameCell} headerCell={ProductNameHeader}/>
<GridColumn field="Category.CategoryName" title="CategoryName" />
<GridColumn field="UnitPrice" title="Price" width="80px" />
<GridColumn field="UnitsInStock" title="In stock" width="80px" />
</Grid>
</Tooltip>
</div>
);
}
}
ReactDOM.render(
<App/>, document.querySelector('my-app'));