Kendo UI Grid React 自定义 header

Question

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

新包的文档对此没有提及。在包源文件中，我找到了包含文件 GridFilterRow.js、GridHeader.js、GridHeaderRow.js 的目录 header，但是无法（或者，我没有找到）自定义这些组件。

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

Answer 1

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

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

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

Column/filter 菜单不在 roadmap for now, but you can vote for it in the official feedback portal。

Answer 2

您可以手动修改 header，在网格呈现后使用 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

Kendo UI Grid React 自定义 header

Kendo UI Grid React customize header

reactjs

kendo-ui

kendo-grid

kendo-ui-grid

kendo-react-ui