代码之家 › 专栏 › 技术社区 › adryanbarbe

剑道UI网格反应自定义标题

kendo-react-ui kendo-ui-grid kendo-grid kendo-ui reactjs

adryanbarbe · 技术社区 · 6 年前

我将数据网格从Kendo UI React包装器更新为新的React包 @progress/kendo-react-grid 0.3.0 . 在旧的jQuery网格版本(或封装到React组件中)中,我能够操作网格头(例如:set columnMenu filterable 到 false )或定义 headerTemplate .

新软件包的文档中没有提到这方面的任何内容。在包源文件中,我找到了目录 header 其中包含文件 GridFilterRow.js , GridHeader.js , GridHeaderRow.js ,但没有办法(或者,我没有找到)自定义这些组件。

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

2 回复 | 直到 6 年前

dimodi neronovs 6 年前

网格的FilterRow在0.3.0版本中是不可自定义的,这就是为什么文档中没有提到它。

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

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

列/筛选器菜单不在 roadmap 现在,但你可以在 official feedback portal .

Roberto Rodriguez 6 年前

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