QuickGrid: Add EventCallback<TGridItem> for clicking on a row.

[Drake53]

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

I'd like to handle the event where a user clicks on a row in a QuickGrid. When this happens I'd use NavigationManager.NavigateTo() to go to the selected item's page.

Describe the solution you'd like

In QuickGrid.razor.cs: add a property '[Parameter] public EventCallback'.
In QuickGrid.razor RenderRow(RenderTreeBuilder, int, TGridItem): add @OnClick to the that invokes the above EventCallback.

Additional context

No response

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[VaclavElias]

I would also suggest to add @onclick to PropertyColumn itself, so we can quickly add click functionality without using TemplateColumn.

[codingrecluse]

Hello, are you open to input from the community on this?
I am currently working with a fork to create a QuickGrid version that has row/column selection features, resizeable/draggable columns, etc. and I thought maybe I could contribute those features outright or at very least the parts that pertain to this, and #45477
Right now I have individual and multi-selection of rows and columns working (with the exception of the shift key (wip)) .

[JoshElias]

@codingrecluse I've taken a look at your fork. I really like your modifications! I'm primarily interested in defining a listener for an entire row which I think you've implemented. Would you be able to help me forking your fancygrid package and creating my own QuickGrid nuget package? I'd like to build my own so I can control the .NET version dependency.

[mihaimyh]

Any updates on this issue, an onclick event on a row will be really useful for our use-case also.

[VaclavElias]

I believe that an onclick row feature should be considered as a standard feature like other current QuickGrid features and shouldn't be moved further in the backlog.

If the suggested implementation is ok, please release it in the next .NET 8 patch or ask for further elaboration so we can help with this feature.

[KurinchiA]

Hello, are you open to input from the community on this? I am currently working with a fork to create a QuickGrid version that has row/column selection features, resizeable/draggable columns, etc. and I thought maybe I could contribute those features outright or at very least the parts that pertain to this, and #45477 Right now I have individual and multi-selection of rows and columns working (with the exception of the shift key (wip)) .

@codingrecluse I am interested in knowing how you are approching the row select. Is it possible to provide access to your fork? Thanks.

[ecospecifier]

This is so annoying! wow. Ended up rolling my own table component in blazor, this quickgrid package is a disgrace.

[Baklap4]

Any update on this?

[Laftek]

Any update?

[Molochnikov]

Any update?

[mhdcindioglu]

Any updates?

[KristofferBerge]

Any update?

[rs2pt]

Also, any update? will be very nice to have a way to tell row is clicked.

[skotl]

bump...?

[ecospecifier]

This is a really HALF baked solution that is super lacking once you actually start using it for anything more than the most BASIC use cases.. I have rolled my own grid view that I use and when I need even more functionality I use Blazor Bootstrap they have AWESOME grids.

[robinwilson16]

Please could this be considered again as it's been over 2 years and it would be very handy to be able to click on a row such as for selecting a row to edit or delete

[robinwilson16]

I worked on a workaround today to do this with as little modification as possible and this is what I came up with in case anyone else finds it useful and it is a combination of other approaches where it selects the selected object on click and also highlights the row.

I made each column sortable and searchable and was able to retain this:

Change a column definition from:

<PropertyColumn Property="@(p => p.Name)" Sortable="true">
    <ColumnOptions>
        <div class="search-box">
            <input type="search" class="form-control" autofocus @bind="FilterMainName" @bind:event="oninput" placeholder="Name..." @onkeyup="FilterMainRefresh" @onchange="FilterMainRefresh" />
        </div>
    </ColumnOptions>
</PropertyColumn>

To the following which adds a clickable div which also toggles the SelectedRow class if it is the selected one:

<TemplateColumn Title="Name" Sortable="true" SortBy="GridSort<MessageTemplateModel>.ByDescending(x => x.Name)">
    <ChildContent>
        <div @onclick="()=>SelectMessageTemplate(context.MessageTemplateID)" class="@(context.MessageTemplateID == selectedMessageTemplate?.MessageTemplateID ? "SelectedRow" : "")">
            <div class="col-justify-start">@context.Name</div>
        </div>
    </ChildContent>
    <ColumnOptions>
        <div class="search-box">
            <input type="search" class="form-control" autofocus @bind="FilterMainName" @bind:event="oninput" placeholder="Name..." @onkeyup="FilterMainRefresh" @onchange="FilterMainRefresh" />
        </div>
    </ColumnOptions>
</TemplateColumn>

The result is:

These are the functions that are called when clicking which load the selected object into a model instance:

[SupplyParameterFromForm]
public MessageTemplateModel? selectedMessageTemplate { get; set; } = new MessageTemplateModel();

private MessageTemplateModel? GetMessageTemplate(int messageTemplateID)
{
    return messageTemplates?.Where(t => t.MessageTemplateID == messageTemplateID).FirstOrDefault();
}

private void SelectMessageTemplate(int? messageTemplateID)
{
    if (messageTemplateID != null && messageTemplateID > 0)
    {
        selectedMessageTemplate = GetMessageTemplate(messageTemplateID ?? 0);
    }
    else
    {
        selectedMessageTemplate = new MessageTemplateModel();
    }
}