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

Question

I am wanting to create a simple Grid using Telerik UI for Blazor but find the online examples do not have what I am trying to do. I want a grid similar to the following but the names changed to protect my employer's IP.

I need a Grid that lists Employees and their year of school, such as freshman, junior, etc. two strings, and also the Grid will contain the primary key of the Employee, but not visible on the grid. When a user clicks a row in the grid, it goes to a URL that includes the EmployeeID primary key as a URL parameter on the end of the URL. I do not want to change the routing, so a simple URL var will work it is a simple grid.

Here is an example View Model (VM) that contains the data being displayed in the Grid:

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

Also here is the code I have in the @code section, I want the employee info to load into the grid when the page is first loaded into the browser:

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

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

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

It is a simple grid, does not need to be updateable, only needs a few pages. I want each row in the grid to be a link that goes to another.razor file and passes it the EmployeeID as a URL parameter. Very simple, I do not think any changes are needed to the routing.

Here is the Grid I have so far, many of the examples online are very cryptic and not all that easy to understand.

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

So I was not sure of what to add to this grid to make each row link out to a different.razor file, but think that template tags might be the key, any input on a fix for this would be good.

Answer 1

Use Template for customized column:

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

Another solution could be the OnRowClick event :

Using 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);
    }
}

Bind your function to the event of your Grid

OnRowClick="@OnRowClickHandler"