How do I highlight a grid row on hover and make it selected on click in Bootstrap?

Question

I am loading data to a grid with 3 columns in Blazor. For the grid structure I have used Bootstrap rows and columns. If I need to highlight rows on hover and keep the row selected using onClick event what is the best way to achieve it?

Below is how I populate data.


    
        User Name
        First Name
        Last Name
    

    @foreach (var user in users)
    {
        
            @user.UserName
            @user.FirstName
            @user.LastName
        
    }

Thanks.

user_1492496 · Answer

You need to maintain the rows selected state. Here is a generic view model to wrap any row type:

public class RowState
{
    public RowState(TItem item) => Item = item;
    public TItem Item { get; set; }
    public bool IsSelected { get; set; }
}

Then using style classes for both selected and hover:

.hover-row:hover {
    background-color: #0000ff33;
}

.selected-row {
    background-color: #0000ff77;
}

I seperated the row into its own component UserRow.razor with a [Parameter] that takes the RowState viewmodel.

This simplifies the logic to handle the click event and logic for the css class to highlight the row.

UserRow.razor


    @User.UserName
    @User.FirstName
    @User.LastName


@code {
    [Parameter]
    public RowState UserRowState { get; set; }   

    private void RowClicked() => UserRowState.IsSelected = !UserRowState.IsSelected;

    private User User => UserRowState.Item;
    private bool IsSelected => UserRowState.IsSelected;
    private string CssClass => IsSelected ? "selected-row" : "";
}

Refactoring your original code:


    
        User Name
        First Name
        Last Name
    

    @foreach (var user in UserRows)
    {
             
    }


@code {
    IEnumerable> UserRows = User.DemoData
        .Select(user => new RowState(user))
        .ToList();
}

Here is a working REPL

user_2455393 · Answer



@foreach (var user in users)
{
    string bg = (user.Id == selectedUserId)? "bg-info" : "";
    
}
@code{

  private int selectedUserId {get;set;} = 0;
  private void SelectUser(int userId){
   selectedUserId = userId;
  }

}


    User Name
    First Name
    Last Name

        @user.UserName
        @user.FirstName
        @user.LastName

user_3433178 · Answer

None of the JavaScript answers is appropriate for Blazor. Ignore them.

If you just want to select a single row, you can use @Ali Borjian's answer

In order to track selection of multiple rows, you can use one of two methods:

Use a class that tracks state information per row. This is Brian's answer.
Create a secondary list that tracks which rows are selected. This follows.

.


    
        User ID
        User Name
    

    @foreach (var user in Users)
    {
        string CSS = SelectedUsers.Contains(user) ? " Selected" : "";
        
            @user.ID
            @user.Name
        
    }


@code {
    class User { public int ID; public string Name;  }

    List Users = new List { new User { ID = 1, Name = "Benjamin" }, new User { ID = 2, Name = "John" }, new User { ID = 3, Name = "David" } };
    List SelectedUsers = new();

    void ToggleSelection(User user)
    {
        if (SelectedUsers.Any(u => u == user)) SelectedUsers.Remove(user);
        else SelectedUsers.Add(user);
    }

}

user_6127393 · Answer

You can utilize Radio toggle buttons (for single selection) or Checkbox toggle buttons (for multiple) as Block buttons with just a little bit of custom styling. Put the whole user row inside the label and use the username or other unique field for the input id.

Here is an example using Radio toggle buttons:

label.btn {
  border: none;
  border-radius: 0;
}




  
    User Name
    First Name
    Last Name
  

  
    
    
      
      
        
          @user.UserName
          @user.FirstName
          @user.LastName
        
      
    
    

    
      
      
        
          @user.UserName2
          @user.FirstName
          @user.LastName
        
      
    
    
      
      
        
          @user.UserName3
          @user.FirstName
          @user.LastName

How do I highlight a grid row on hover and make it selected on click in Bootstrap?

4 Answers