Blazor QuickGrid — попытка дважды щелкнуть строку или использовать кнопку

Question

Я использую предварительную версию QuickGrid.

У меня есть базовый QuickGrid в Blazor для списка пользователей. В идеале я хочу иметь возможность дважды щелкнуть строку пользователя, чтобы открыть модальное окно редактирования.

Первый вопрос: можно ли как-то создать код, который позволит дважды щелкнуть строку QuickGrid? Я вижу, что это не та функциональность, которую легко включить.

Во-вторых: если это невозможно (или оно того не стоит), есть ли хороший пример столбца QuickGrid, который будет создавать кнопку «Редактировать» в каждой строке, которая будет отображать модель для этого конкретного пользователя? У меня тоже настроены фильтры. Я не уверен, что это усложняет ситуацию.

Я могу добавить немного кода, но на самом деле это просто базовый фильтруемый QuickGrid, который у меня есть прямо сейчас. В основном я просто проверяю, знает ли кто-нибудь хорошие примеры.

Answer 1

На данный момент (ноябрь 2023 г.) встроенного способа нет.

Однако с помощью столбцов шаблона вы можете добавить это. В качестве примера я создал целую страницу при наведении и выделил ее двойным кликом:

         @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="[e-mail]">
                <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="[e-mail]">
                <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>    
        [e-mail]{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; }
        }
    }