关于 Blazor 网格的 Telerik UI 的简单问题

Question

我想使用 Telerik UI 为 Blazor 创建一个简单的网格，但发现在线示例没有我想要做的。 我想要一个类似于以下的网格，但名称已更改以保护我雇主的 IP。

我需要一个 Grid 列出员工和他们的学年，例如新生、初中等两个字符串，并且 Grid 将包含 Employee 的主键，但在网格上不可见。 当用户单击网格中的一行时，它将转到 URL，其中包含 EmployeeID 主键作为 ZE6B391A8D2C4D459703A23A8B658 末尾的 URL 参数。 我不想更改路由，所以一个简单的 URL var 就可以了，它是一个简单的网格。

这是一个示例视图 Model (VM)，其中包含在网格中显示的数据：

  public class EmployeeSelectVM
  {
        public int EmployeeID { get; set; }
        public string EmployeeName { get; set; }
        public string Class { get; set; }
    }

这也是我在@code 部分中的代码，我希望在页面首次加载到浏览器时将员工信息加载到网格中：

   public IList<EmployeeSelectVM> Employees { get; set; }

   protected override void OnInitialized()
   {
      LoadEmployees();
   }

   public void LoadEmployees()
   {
      Employees = employeeService.GetEmployees();
   }

它是一个简单的网格，不需要可更新，只需要几页。 我希望网格中的每一行都成为指向另一个文件的链接。razor 文件并将 EmployeeID 作为 URL 参数传递给它。 很简单，我认为不需要对路由进行任何更改。

这是我到目前为止的网格，网上的许多例子都非常神秘，并不那么容易理解。

<TelerikGrid Data="@Employees" Height="415px" Class="dv2 bottomborder details"
             Sortable="true"
             Resizable="true"
             Reorderable="true"
             SelectionMode="GridSelectionMode.Single"
             ScrollMode="@GridScrollMode.Virtual"
             RowHeight="60"
             PageSize="5"
             Navigable="true">
    <GridColumn Field="@nameof(EmployeeSelectVM.EmployeeID)" Title="Employee ID" Width="25px" />
    <GridColumn Field="@nameof(EmployeeSelectVM.EmployeeName)" Title="Employee Name" Width="195px" />
    <GridColumn Field="@nameof(EmployeeSelectVM.Class)" Title="Class" Width="195px" />
</TelerikGrid>

因此，我不确定要添加到此网格中以使每一行链接到不同的.razor 文件，但认为模板标签可能是关键，对此进行修复的任何输入都会很好。

Answer 1

为自定义列使用Template ：

<GridColumn Title="Link">
    <Template>
        @{
            EmployeeSelectVM employee = context as EmployeeSelectVM;
            string url = BaseURL + employee.EmployeeID.ToString();
            <a href="@url">Link</a>
        }
    </Template>
</GridColumn>

另一种解决方案可能是OnRowClick 事件：

使用NavigationManager器

@inject NavigationManager NavigationManager

@code{
    public void OnRowClickHandler(GridRowClickEventArgs args){
        EmployeeSelectVM employee = args.Item as EmployeeSelectVM;
        string url = BaseURL + employee.EmployeeID.ToString();
        NavigationManager.NavigateTo(url);
    }
}

将您的 function 绑定到您的 Grid 事件

OnRowClick="@OnRowClickHandler"