如何在SfDataGrid无数据时插入提示行并保持表头始终可见
SfDataGrid 无数据时保留表头+显示暂无数据提示实现方案
方案1:零额外逻辑实现表头始终可见
直接开启控件内置的空数据表头显示属性即可,不需要修改现有数据绑定逻辑,设置后哪怕绑定的数据源条数为0,表头也会正常渲染,不会出现整个网格空白的情况:
- XAML端静态声明控件时直接加属性:
<syncfusion:SfDataGrid x:Name="dataGrid" ShowHeaderWhenEmpty="True" ItemsSource="{Binding GridDataSource}"> <!-- 原有列定义保持不变 --> </syncfusion:SfDataGrid>
- 后端动态初始化控件时直接赋值:
dataGrid.ShowHeaderWhenEmpty = true;
这个属性在2018 Volume 3及以上版本的SfDataGrid中可用,版本过低的话升级控件即可,不需要自己写冗余的自定义逻辑。
方案2:无数据时显示自定义「暂无匹配数据」提示
根据项目控件版本选对应实现即可:
方式A:使用内置空数据模板(推荐)
控件原生支持EmptyDataTemplate属性,开启ShowHeaderWhenEmpty后,数据源为空时会自动在表头下方的网格区域渲染你自定义的提示内容,不会侵入业务数据源,服务返回有效数据后提示会自动隐藏,不需要手动处理显隐逻辑:
<syncfusion:SfDataGrid ShowHeaderWhenEmpty="True" ItemsSource="{Binding GridDataSource}"> <syncfusion:SfDataGrid.EmptyDataTemplate> <DataTemplate> <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center"> <TextBlock Text="暂无匹配数据,请调整筛选条件后重试" FontSize="14" Foreground="#666666"/> </StackPanel> </DataTemplate> </syncfusion:SfDataGrid.EmptyDataTemplate> <!-- 原有列定义保持不变 --> </syncfusion:SfDataGrid>
提示内容的样式可以完全自定义,加图标、加操作按钮都可以。
方式B:手动插入占位提示行(仅适用于老版本控件)
如果因为项目依赖限制没法升级到支持上述属性的版本,可以在接收服务返回结果时做判断:
- 当返回结果条数为0时,不要直接绑定空集合,新建一个和绑定实体类型一致的列表,插入一个占位实体,把需要显示提示的字段赋值为「暂无匹配数据」
- 监听控件的
QueryCellStyle、SelectionChanging事件,把这个占位行设置为跨列居中、不可编辑、不可选中的样式,同时屏蔽这行的排序、筛选、右键菜单等交互 - 当服务返回有效数据时,直接用真实结果集替换掉带占位行的集合即可
这种方式需要手动处理很多边界交互,容易出bug,优先用内置属性方案。
避坑:空数据时不要把
ItemsSource赋值为null,赋值为null时哪怕开了ShowHeaderWhenEmpty也可能出现表头不渲染的问题,空状态绑定空的ObservableCollection<T>或者List<T>即可。
内容的提问来源于stack exchange,提问作者Davide Tramontano
相关产品推荐
相关产品推荐

