【问题标题】:How to change the header of the details expand/collapse columns for the detail rows in kendo react?如何更改剑道反应中详细信息行的详细信息展开/折叠列的标题?
【发布时间】:2019-05-02 16:59:45
【问题描述】:

我需要在折叠/展开列的标题中添加文本“+/-”以获取剑道反应中的详细信息行。我还想添加和事件,因此当用户单击该列时,它会展开或折叠所有行。我使用this 创建详细信息行。

This image shows better what i want to change

【问题讨论】:

    标签: reactjs kendo-ui header customization


    【解决方案1】:

    请看一下这段代码 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);
    

    【讨论】:

    • 感谢玛丽莎的帮助
    【解决方案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 的功能请求

    【讨论】:

      猜你喜欢
      • 2020-10-26
      • 1970-01-01
      • 1970-01-01
      • 2017-08-17
      • 2019-06-06
      • 2012-11-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多