Kendo UI Grid React 自定义 header
Kendo UI Grid React customize header
我将数据网格从 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?
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。
您可以手动修改 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 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?
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。
您可以手动修改 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