Kendo UI Grid React 自定义标题答案

【问题标题】：Kendo UI Grid React customize headerKendo UI Grid React 自定义标题
【发布时间】：2018-03-08 14:19:06
【问题描述】：

我将我的数据网格从 Kendo UI React Wrappers 更新为新的 React 包 @progress/kendo-react-grid 0.3.0。在旧的 jQuery 网格版本（或封装到 React 组件中）中，我能够操作网格标题（例如：将 columnMenu filterable 设置为 false）或定义 headerTemplate。

新包的文档没有提到任何关于此的内容。在包源文件中，我找到了目录header，其中包含文件GridFilterRow.js、GridHeader.js、GridHeaderRow.js，但是没有办法（或者，我没有找到）自定义这些组件。

我想知道是否有任何方法可以在 React 的 Kendo UI Grid 的新重写版本中自定义网格标题？

【问题讨论】：

标签： reactjs kendo-ui kendo-grid kendo-ui-grid kendo-react-ui

【解决方案1】：

网格的FilterRow在0.3.0版本中是不可定制的，这也是文档中没有提到的原因。

官方 kendo-react 存储库中记录了一个关于此的问题： Make Grid Filter Cells more customizable

对于当前版本，filterable and filter settings 可以使用每列的列设置进行控制。还有属性 headerClassName 可用于设置单元格样式。

列/过滤器菜单目前不在roadmap 中，但您可以在official feedback portal 中投票。

【讨论】：

【解决方案2】：

您可以手动修改标题，在网格呈现后使用 Java 脚本添加 HTML 元素，这不是一个漂亮的解决方案，但它会在等待官方解决方案时完成工作。

这是我所做的：

class Table extends React.Component {
  constructor(props) {
    super(props);
    this.gridRef = React.createRef();
  }

    render() {

        return (
          <div ref={this.gridRef} >
            <Grid 
                data={data} 
                onItemChange={itemChange}
                cellRender={cellRender}
                rowRender={rowRender} 
                editField="inEdit"
            >
                <GridToolbar> 
                </GridToolbar>

                <Column title="Column Name" field="ProductName"  width={300}  locked={true}/>
                <Column field="ProductID" title="Id"  editable={false} />
                <Column title="Units In Stock" editor="numeric" field="UnitsInStock" />
                <Column title="First Ordered" editor="date" format="{0:d}"  field="FirstOrderedOn" />
                <Column editor="boolean" field="Discontinued" />
                <Column title="Units In Stock" editor="numeric" field="UnitsInStock" />
                <Column title="First Ordered" editor="date" format="{0:d}"  field="FirstOrderedOn" />
                <Column editor="boolean" field="Discontinued" />
            </Grid>
          </div>
        );
    }

    componentDidMount(){
       var ths = this.gridRef.current.getElementsByTagName('th');

      for(var i = 0; i < ths.length; i++){
        ths[i].appendChild( this.createColumnMenuIcon() );
      }
   }

createColumnMenuIcon(){
  var icon = document.createElement('i');
  icon.classList.add('fa');
  icon.classList.add('fa-chevron-down');
  icon.setAttribute("style", "position: absolute;top: 12px;right: 10px;");

  icon.addEventListener('click', function(){
    console.log('Click Menu');
  })

  return icon;
}

}

export default Table

【讨论】：