【发布时间】:2019-05-02 16:59:45
【问题描述】:
我需要在折叠/展开列的标题中添加文本“+/-”以获取剑道反应中的详细信息行。我还想添加和事件,因此当用户单击该列时,它会展开或折叠所有行。我使用this 创建详细信息行。
【问题讨论】:
标签: reactjs kendo-ui header customization
我需要在折叠/展开列的标题中添加文本“+/-”以获取剑道反应中的详细信息行。我还想添加和事件,因此当用户单击该列时,它会展开或折叠所有行。我使用this 创建详细信息行。
【问题讨论】:
标签: reactjs kendo-ui header customization
请看一下这段代码 sn-p 它添加了网格标签和 onclick 功能。 我没有想到的部分是切换展开/折叠。 我也遇到过expandField这个属性,但是不知道怎么用。
class DetailComponent extends GridDetailRow {
render() {
const dataItem = this.props.dataItem;
return (
<section>
<p><strong>In Stock:</strong> {dataItem.UnitsInStock} units</p>
<p><strong>On Order:</strong> {dataItem.UnitsOnOrder} units</p>
<p><strong>Reorder Level:</strong> {dataItem.ReorderLevel} units</p>
<p><strong>Discontinued:</strong> {dataItem.Discontinued}</p>
<p><strong>Category:</strong> {dataItem.Category.CategoryName} - {dataItem.Category.Description}</p>
</section>
);
}
}
class App extends React.Component {
state = {
data: products.slice(0)
}
expandChange = (event) => {
event.dataItem.expanded = !event.dataItem.expanded;
this.forceUpdate();
}
render() {
return (
<Grid
data={this.state.data}
detail={DetailComponent}
style={{ height: '400px' }}
expandField="expanded"
onExpandChange={this.expandChange}
>
<Column field="ProductName" title="Product" width="300px" />
<Column field="ProductID" title="ID" width="50px" />
<Column field="UnitPrice" title="Unit Price" width="100px" />
<Column field="QuantityPerUnit" title="Qty Per Unit" />
</Grid>
);
}
}
class ShowAlert extends React.Component {
showAlert() {
alert("Im an alert");
}
render() {
return <a className='k-link' onClick={this.showAlert}>+/-</a>;
}
}
export default ShowAlert;
ReactDOM.render(
<App />,
document.querySelector('my-app')
);
const heirarchyElement = document.getElementsByClassName("k-hierarchy-cell")[0];
ReactDOM.render(<ShowAlert />, heirarchyElement);
【讨论】:
Telerik 对此提供了答案:https://stackblitz.com/edit/react-abh1id?file=app/main.jsx
我已经调试了 kendo-react 库,但无法实现。我已经打开了 kendo React https://feedback.telerik.com/kendo-react-ui/1408002-change-header-detail-rows 的功能请求
【讨论】: