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

Question

我们有一个Kendo React网格，我们需要在数据为空时显示未找到记录的消息。

 <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>

上面的示例来自official documentation。我相信这就是您想要的。