2

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

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

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

4

2 回答 2

1

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

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

对于当前版本，可以使用每列的列设置来控制可过滤和过滤设置。您可以使用属性 headerClassName 来设置单元格的样式。

列/过滤器菜单暂时不在路线图中，但您可以在官方反馈门户中为它投票。

于 2018-03-09T12:58:56.207 回答
0

您可以手动修改标题，通过在网格呈现后使用 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
于 2018-09-13T22:00:03.723 回答