Blazor QuickGrid - Trying to either double-click a row or use a button

Question

I'm using the prerelease of QuickGrid.

I have a basic QuickGrid in Blazor for a list of users. Ideally I want to be able to double-click a user row to pull up an edit modal.

First question: is it possible to somehow create code that will allow a QuickGrid row to be double-clicked? I'm seeing it's not functionality that is readily included.

Second: if this isn't possible (or isn't worth it) is there a good example of a QuickGrid column that will create an "Edit" button on each row that will pull up the model for that particular user? I also have it set up for filters. I'm not sure if that complicates things.

I can add some code but it's really just a basic filterable QuickGrid that I have right now. I'm mostly just checking to see if anyone knows of some good examples.

Answer 1

Currently (November 2023) there is no built-in way.

However, with the help of template columns you can add this. As an example, I created an entire page with the hover and selected it with a double click:

   @page "/"
    @rendermode InteractiveServer
    
    @using Microsoft.AspNetCore.Components.QuickGrid
    
    <h6><b>DoubleClick row to select Person</b></h6>
    <QuickGrid Items="@filteredList" TGridItem="Person">
        <TemplateColumn Title="LastName" Class="td-width" SortBy="GridSort<Person>.ByDescending(x => x.LastName)">
            <div @onmouseover="()=>mouseOver(context.Id)"
                 class="[email protected]">
                <div class="content">@context.LastName @context.Id</div>
            </div>
        </TemplateColumn>
        <TemplateColumn Title="FirstName" Class="td-width" SortBy="GridSort<Person>.ByDescending(x => x.FirstName)">
            <div @onmouseover="()=>mouseOver(context.Id)"
                 class="[email protected]">
                <div class="content">@context.FirstName</div>
            </div>
        </TemplateColumn>
    </QuickGrid>
    <div class="m-4">
        <h6>Details for<br/><b>  @currentItem.FirstName @currentItem.LastName</b></h6>
        <b>Id: @currentItem.Id</b>
    </div>
    <style>    
        [email protected]{background:yellow;}
    
    
         .td-width {border: 1px solid #aaa;padding: 0 !important;user-select: none;}
         .td-width > div {width: calc(100%); cursor: pointer;display: inline-block;padding: 0.1rem;
         }
       td.td-width div.content {
            display: inline-block;
            padding: 0;
        }
    
    </style>
    
    @code {
        IQueryable<Person> filteredList;
        
    
        Person currentItem;
    
        protected override void OnInitialized()
        {       
            filteredList = Person.DataList.AsQueryable();
    
            currentItem = Person.DataList.First();
        }
        int hoverId;
    
    
        void clickValue(int id)
        {
            currentItem = Person.DataList.Where(p => p.Id == id).FirstOrDefault();
            
        }
    
        
        public class Person
        {
            public static List<Person> DataList= new(){
                new(){Id=1,LastName="Seinfeld",FirstName="Jerry"},
                new(){Id=2,LastName="Benes",FirstName="Elaine"},
                new(){Id=3,LastName="Saccamano",FirstName="Bob"}
                };
    
            public int Id { get; set; }
            public string LastName { get; set; }
            public string FirstName { get; set; }
        }
    }

Answer 2

In case this helps anyone: I ended up Syncfusion's grid because it's just a lot easier. Thankfully that was an option I could take advantage of.