Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 26 May 2021 14:51 by ADMIN
Lutz
Created on: 15 May 2021 00:33
Category: UI for Blazor
Type: Feature Request
0
TelerikGrid - Deselect selected rows (by clicking on it or promatically)

There doesn't seem to be a way to deselect the selected row either by clicking on a selected row again or by two-way-binding and setting it to an empty list.

 

This would be pretty handy as currently the only way that makes sense for me is to make no use of selection mode at all.

Attached Files:
5 comments
ADMIN
Svetoslav Dimitrov
Posted on: 26 May 2021 14:51

Hello Lutz,

You can use the OnRowClick event to achieve the desired behavior. 

In order to achieve the desired behavior, you should handle both the selection and deselection of the items in the OnRowClick event handler. One important thing that should be done is the cancellation of the SelectedItemsChanged event. This is required because the SelectedItemsChanged event would fire after the OnRowClick. 

As an attached file you can see a demo application that showcases such an implementation.

That being said, I am marking this thread as "Completed" because such behavior can already be achieved using the existing events.

Regards,
Svetoslav Dimitrov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Attached Files:
Lutz
Posted on: 20 May 2021 08:48
Thanks for the repsonse. A toggle mode like SelectionMode="GridSelectionMode.Toggle" would be nice!
ADMIN
Dimo
Posted on: 20 May 2021 08:27

Hello Lutz,

I checked in more detail and confirm that it is not possible to trigger deselection specifically in the row click event.

If Ctrl + Click will not be intuitive for your users, please consider adding a checkbox column, which will produce the desired ability to unselect a selected row in a straightforward way.

In the meantime, we will review this use case in the product team.

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Lutz
Posted on: 18 May 2021 12:00

Hi Dimo,

 

yes - I tried that, but it does not seem to work (the former selected row stays red - might be an issue on doing it in the rowClick event as it might overwrite the selected items later):

<TelerikGrid Data="@customers"
                         Pageable="true" Sortable="true" Groupable="true"
                         FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
                         Resizable="true" Reorderable="true" PageSize="20" SelectionMode="GridSelectionMode.Single" OnRowClick="RowClick" @bind-SelectedItems="SelectedItems">
                <GridColumns>
                    <GridColumn Field="@(nameof(Customer.id))" Width="120px" Title="id" />
                    <GridColumn Field="@(nameof(Customer.Name))" Title="Name" Groupable="false" />
                    <GridColumn Field="@(nameof(Customer.City))" Title="City" />
                    <GridColumn Field="@(nameof(Customer.Country))" Title="Country" />
                </GridColumns>
            </TelerikGrid>

 

@code {

 

 private int selectedCustomerId = 0;

 public IEnumerable<Customer> SelectedItems { get; set; } = Enumerable.Empty<Customer>();

private Customer CustomerDetails;

private async Task RowClick(GridRowClickEventArgs args)
    {
        Customer selectedCustomer = args.Item as Customer;

        if (selectedCustomer.id == selectedCustomerId)
        {
            selectedCustomerId = 0;
            CustomerDetails = null;
            SelectedItems = Enumerable.Empty<Customer>();
            StateHasChanged();
        }
        else
        {
            selectedCustomerId = selectedCustomer.id;

            CustomerDetails = await customerData.GetCustomer(selectedCustomerId);
        }
    }

}

 

ADMIN
Dimo
Posted on: 18 May 2021 11:09

Hi Lutz,

The Grid allows users to deselect rows in two ways:

  • via unchecking the respective checkbox, especially on touch devices
  • via Ctrl + Click (Windows) or Cmd + Click (Mac)

If the user should be able to deselect a row via a simple click, this may create inconsistency with other well-known interfaces (such as Windows Explorer or Excel), which don't behave that way. Also, deselecting multiple rows with a single click on any row will become impossible.

On the other hand, programmatic selection and deselection is demonstrated in the online demo:

https://demos.telerik.com/blazor-ui/grid/selection

If you want to deselect all rows, you can assign an empty List, e.g.:

SelectedItems = new List<Customer>();

Have you tried this approach? Let me know if you have any comments on all of the above.

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Create an account Log In
View
Type
Status
Category