reactjs - 网格为空时不显示记录 - Kendo React Grid

Question

我们有一个 Kendo React 网格，当数据为空时，我们需要显示 No record found 消息。

 <Grid
                        sortable
                        filterable
                        expandField="expanded"
                        detail={props => <DetailComponent
                            {...props}
                            onChange={this.handleDetailTemplateChange}
                            changed={[]}

                        />}
                        onExpandChange={this.expandChange}
                        pageable={this.state.pageable}
//                        scrollable="true"
                        editField="inEdit"
                        data={this.state.providersPage}
                        sort={this.state.sort}
                        onSortChange={this.handleSortChange}
                        filter={this.state.filter}
                        onFilterChange={this.handleFilterChange}
                        onPageChange={this.handlePageChange}
                        total={this.state.total}
                        skip={this.state.skip}
                        pageSize={this.state.pageSize}
                        onItemChange={this.handleProviderChange}
                        resizable>

                        <GridColumn field="affiliationRelationshipStatusName" title="Network Relationship" filterCell={this.CategoryFilterCell} 
                                    cell={NetworkRelationshipCell} width="245px"/>
                         <GridColumn field="address" title="Places" filterable={false} cell={NetworkPlaceCell} 
                         width="245px"/> 
</Grid>

请参阅 Kendo 文档，但找不到任何解决方案。请建议

Answer 1

这些包带有 GridNoRecords 导出组件，您可以将其放置在网格内。没有记录时会渲染。在导入网格本身时导入它：

        import { Grid, GridColumn, GridNoRecords } from '@progress/kendo-react-grid'

然后把它放在网格里面，里面有一些内容。

        <Grid data={[]}>
            <GridNoRecords>
                There is no data available
            </GridNoRecords>
            <GridColumn field="id" />
            <GridColumn field="name" />
        </Grid>

上面的例子来自官方文档。我相信这就是您正在寻找的。