网格选择

Grid组件提供对行选择的支持。

在本文中:

• 选择基础知识
  • —启用行选择功能
  • —只选择带复选框的行
• 笔记
  • 编辑模式
  • 模板选择
  • 异步操作
  • SelectedItems等于比较
  • 处理数据更改
  • 使用虚拟化行在网格中进行选择
  • 行拖放

选择基础知识

您可以通过设置来配置选择行为SelectionMode给一个成员Telerik.Blazor.GridSelectionMode枚举。行选择可以是:

• 没有一个-(默认值)禁用行选择
• 单
• 多个

要选择一行，请单击它。要选择多行，请按住Ctrl或转变键来扩展选择。

还可以使用复选框列来选择行。要使用它，加一个GridCheckboxColumn在GridColumns收集网格。它适用于两种选择模式。在多重选择模式下，复选框列提供额外的功能．

控件获取或设置所选项目设置selecteditem财产。它是来自网格的项的集合数据．

的单一的选择和多个选择文章提供了更多关于使用网格特性的示例和细节。

—启用行选择功能

查看行选择模式如何工作 Single Multiple         @code { public List GridData { get; set; } GridSelectionMode selectionMode = GridSelectionMode.Single; protected override void OnInitialized() { GridData = new List(); for (int i = 0; i < 15; i++) { GridData.Add(new Employee() { EmployeeId = i, Name = "Employee " + i.ToString(), Team = "Team " + i % 3 }); } } public class Employee { public int EmployeeId { get; set; } public string Name { get; set; } public string Team { get; set; } } }

—只选择带复选框的行

@*需要点击复选框进行行选择*@        @code { public List GridData { get; set; } protected override void OnInitialized() { GridData = new List(); for (int i = 0; i < 15; i++) { GridData.Add(new Employee() { EmployeeId = i, Name = "Employee " + i.ToString(), Team = "Team " + i % 3 }); } } public class Employee { public int EmployeeId { get; set; } public string Name { get; set; } public string Team { get; set; } } }

笔记

编辑模式

单元格编辑模式

在Incell编辑模式选择只能通过a来应用复选框列（< GridCheckboxColumn / >)。这是必需的，因为触发选择和单元格编辑(在行中单击)的重叠操作—如果行单击选择与单元格编辑一起启用，则每次选择行的尝试都会将单元格置于编辑模式;并且每次尝试编辑单元格都会选择一个新行。这样的用户体验令人困惑，因此选择只能通过行选择复选框进行。

要查看如何选择在cell编辑模式下正在编辑的行，而不使用< GridCheckboxColumn / >请查看用cell EditMode编辑行选择知识库文章。

内联和弹出式编辑模式

在内联编辑模式和弹出编辑模式可以通过单击所需的行或使用< GridCheckboxColumn / >．

模板选择

当使用网格时模板如果您想要阻止在用户单击Selection时触发它，则应该添加@onclick: stopPropagation指令到元素。

如果您正在使用行模板，网格不能为您呈现选择复选框，因此您必须自己将它们绑定到模型中的字段，并处理它们的选择更改事件以填充设置selecteditem收集网格。你可以在下面的线程中找到一个开始的例子:带选择的网格行模板-不确定如何绑定到选定项

异步操作

类中处理异步操作(如按需加载数据)OnRowClick或OnRowDoubleClick而不是在事件中SelectedItemsChanged．

SelectedItems等于比较

的设置selecteditem集合与网格进行比较数据集合，以确定将突出显示哪些行。框架的默认行为是通过对象的引用来比较对象。

当设置selecteditem如果从不同的数据源获取到网格(例如，从单独的服务方法而不是从视图模型)，则引用可能不匹配，因此不会有突出显示的项。在这种情况下，您必须重写=方法，以便它匹配它们，例如，通过唯一标识符而不是通过引用，以便两个对象可以相等，而不管它们的来源如何，但根据它们的内容。重写=方法时，还建议重写GetHashCode方法方法。中提供了一个类似的示例启动编辑或插入项目以Grid State为例，其中存在从状态反序列化的项的类似场景。

处理数据更改

当网格数据集合更改时，设置selecteditemCollection具有以下行为:

• 如果网格不使用一个ObservableCollection为其数据- - -设置selecteditem收藏将被保存。当根据需要和业务逻辑更改数据时，您需要清除或操作它。

  • 如果更新或删除项目，则必须通过网格对所选项目进行相同的更新编辑事件．

• 当使用ObservableCollection对于网格数据-如果一个项目被删除或整个数据被清除使用集合的.Clear ()方法，则会自动更新设置selecteditem集合(已删除的数据项将从Selected items集合中删除)。

  • 对于其他CRUD操作(创建和更新)，您应该使用网格编辑事件根据您的业务逻辑和首选行为来处理这种情况。
  • 当数据发生更改并且所选项被清除时SelectedItemsChanged事件将触发空集合。如果使用双向绑定，则会清除集合。

使用虚拟化行在网格中进行选择

当网格虚拟化的行和SelectionMode设为多个可选择的项将是当前项集(页)中的项。如果您选择了一个项目并向下滚动到一些尚未呈现的项目(虚拟化开始了)，并且您希望使用转变按钮，选择将从当前集(页)第一项的位置开始，一直选择到最后一项。

行拖放

如果用户拖动选定的行，则在行拖放时清除当前所选择的行。

另请参阅

• 现场演示:网格选择
• 单一的选择
• 多个选择