CODEWITHSUNDEEP
buttonblazor-server-sidedouble-clickquickgrid
AGeist
AGeist

Reputation: 25

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

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.

Upvotes: 0

Views: 4681

Answers (3)

Chris Berlin
Chris Berlin

Reputation: 1067

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:

Code updated May 2024

   @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)"
                  @onclick="()=>clickValue(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)"
                  @onclick="()=>clickValue(context.Id)"
                 class="[email protected]">
                <div class="content">@context.FirstName</div>
            </div>
        </TemplateColumn>
    </QuickGrid>
    @if(currentItem!=null)  { 
        <div class="m-4">
            <h6>Details for<br/><b>  @currentItem.FirstName @currentItem.LastName</b></h6>
            <b>Id: @currentItem.Id</b>
        </div>
    }
    <style>    
        .selected-@currentItem?.Id{background:yellow;}        
    
        .selected-@hoverId{background:orange;}

         .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();
            
        }
    
        
        void mouseOver(int id)
        {
            hoverId = Person.DataList.Where(p => p.Id == id).FirstOrDefault()?.Id;
            
        }
    
        
        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; }
        }
    }

Upvotes: 0

Andr&#233; Claesson
Andr&#233; Claesson

Reputation: 168

This can actually be achieved with some CSS trickery. I agree that this is something that should be possible by default but this worked for me as a workaround. It is working by adding an invisible clicking area that spans all the columns.

Full sample:

<QuickGrid Items="@users.AsQueryable()">
    <TemplateColumn Title="Id">
        @context.Id
        <div class="click-area" @onclick="() => selected = context"></div>
    </TemplateColumn>
    <PropertyColumn Property="@(u => u.FirstName)" Title="First Name" />
    <PropertyColumn Property="@(u => u.LastName)" Title="Last Name" />
</QuickGrid>

Selected user: @selected?.FirstName

<style>
    tr {
        position: relative;
    }

    .click-area {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        cursor: pointer;
    }
</style>

@code {
    private class User
    {
        public int? Id { get; set; }
        public string? FirstName { get; set; }
        public string? LastName { get; set; }
    }

    private List<User> users = [
        new User { Id = 1, FirstName = "Arthur", LastName = "Smith" },
        new User { Id = 2, FirstName = "Blake", LastName = "Johnson" },
        new User { Id = 3, FirstName = "Clyde", LastName = "Turner" }
    ];

    private User? selected;
}

Upvotes: 3

AGeist
AGeist

Reputation: 25

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.

Upvotes: 1

Related Questions