如何更改 kendo 中详细信息行的详细信息 expand/collapse 列的 header 反应？

Question

我需要在 collapse/expand 列的 header 中添加文本“+/-”，以便 kendo 中的详细信息行做出反应。我还想添加事件，以便当用户单击该列时，它会展开或折叠所有行。我使用 this 创建了详细信息行。

This image shows better what i want to change

Answer 1

请查看此代码片段，它添加了网格标签和 onclick 函数。我还没有弄清楚的部分是切换 expand/collapse。我也遇到过这个属性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);

Answer 2

更新：

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

打开了一个功能请求

如何更改 kendo 中详细信息行的详细信息 expand/collapse 列的 header 反应？

How to change the header of the details expand/collapse columns for the detail rows in kendo react?

customization

header

kendo-ui

reactjs

更新：

原文：