how to get a KeyDown event in a row or in the grid

5 Answers 69 Views
Grid
Danny
Top achievements
Rank 1
Veteran
Iron
Danny asked on 29 Jul 2021, 12:11 PM
Greetings, could you help me with the information on how I obtain a keyDown event in the grid, or a row of this, what happens is that I need to obtain when the user presses the delete key in order to eliminate the current row that he is selecting.

I use Blazor 2.25 web server
vs 2019

5 Answers, 1 is accepted

Sort by
1
Matthias
Top achievements
Rank 5
Bronze
Bronze
Iron
answered on 29 Jul 2021, 12:39 PM

Hi - I use a key handler

Have a look at the snippet:


  <div @onkeypress="@KeyHandler">
                    
                    <TelerikGrid Data="@Customers"
                                 Height="100%"
                                 Pageable="true"
                                 PageSize="15"
                                 Resizable="true"
                                 Sortable="true"
                                 Navigable="true"
                                 ScrollMode="GridScrollMode.Scrollable"
                                 ShowColumnMenu="true">
                        <GridColumns>
                            <GridColumn Field="@(nameof(customer.CustName))" Visible="false"/>
                            <GridColumn Field="@(nameof(customer.CustCity))" Width="80px" Visible="false"/>
                            <GridColumn Field="@(nameof(customer.CustPhone))"/>
                            <GridColumn Field="@(nameof(customer.CustZip))" Width="80px"/>
                        </GridColumns>
                    </TelerikGrid>
                </div>

and the handler:


public string aKey { get; set; } 

 void KeyHandler(KeyboardEventArgs e)
    {
        aKey = $"pressed: {e.Key}";
       
    }

this works perfect in my scenario

Best regards Matthias

Matthias
Top achievements
Rank 5
Bronze
Bronze
Iron
commented on 29 Jul 2021, 12:41 PM

of course you have to check which row is selected :) and then you can delete the row
Danny
Top achievements
Rank 1
Veteran
Iron
commented on 30 Jul 2021, 02:52 PM

Greetings, Thank you very much for the comment, if I had imagined something like that, a shame that the Telerik Blazor controls are very basic in events, we hope you hear our prayers and increase the benefits of the controls.
1
Matthias
Top achievements
Rank 5
Bronze
Bronze
Iron
answered on 31 Jul 2021, 04:30 AM

Hello Danny,
sorry, I used it for searching the grid and didn't need the "escape" key. But there is also a solution for that. 

razor:

@page "/"
@using System.Collections.ObjectModel
 
<h1>Hello, world!</h1>


Welcome to your new app.


<div @ref="testRef" tabindex="0" @onkeydown="HandleKeyDown">
    <TelerikGrid Data="@customers">
        <GridColumns>
            <GridColumn Field="@nameof(Customer.Name)" Title="Name"></GridColumn>
            <GridColumn Field="@nameof(Customer.City)" Title="City"></GridColumn>
        </GridColumns>
    </TelerikGrid>
</div>
@pressedKey
 

code:


@code{
    private ElementReference testRef;
    private string pressedKey;
    public ObservableCollection<Customer> customers { get; set; }


    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await testRef.FocusAsync();
        }
    }
    protected override void OnInitialized()
    {
        customers = new ObservableCollection<Customer>();
        customers.Add(new Customer()
        {
            Name = "Tom", City = "Berlin"
        });
        customers.Add(new Customer()
        {
            Name = "Tim", City = "New York"
        });
        customers.Add(new Customer()
        {
            Name = "Jim", City = "Paris"
        });
        base.OnInitialized();
    }

    private void HandleKeyDown(KeyboardEventArgs e)
    {
        pressedKey = e.Key;
    }

    public class Customer {
        public string Name { get; set; }
        public string City { get; set; }
    }
}

Important: the ref needs the focus and the tabindex 

Attached is a small video showing the behavior after pressing the escape key.
Have a nice weekend - Greetings Matthias

Matthias
Top achievements
Rank 5
Bronze
Bronze
Iron
commented on 31 Jul 2021, 04:35 AM

there is still a bug - once the grid has the focus. I'll have a look at the weekend - I think it should be possible with Javascript.
1
Matthias
Top achievements
Rank 5
Bronze
Bronze
Iron
answered on 01 Aug 2021, 12:39 PM | edited on 01 Aug 2021, 02:12 PM

Hi Danny,

 

as I had already suspected, it will probably not work without JavaScript. I have written a small script for this, which now intercepts all keystrokes and then calls "dotnet" from the script.  

the parameter:

jsInteropTest: assemblyname
jsKeyHandler: methodname

insert in a suitable place: (_Host.cshtml, index.html)

<script>
window.onload = function (){
 eventHandler = function (e){
    if (e.keyCode == 46|| e.keyCode==8)
    {       
            DotNet.invokeMethodAsync('jsInteropTest', 'jsKeyHandler',e.keyCode);
          
    }
     
  }

  window.addEventListener('keydown', eventHandler, false);
}
</script>

In the code, the corresponding method is then called:

(I have implemented the method in MainLayout.) 

 [JSInvokable("jsKeyHandler")] 
 public  static void jsKeyHandler(object text)
    { 
       string FromjsKey= text.ToString();
        
  }

From there, the value can then be transmitted.

(Cascading value, State Container...)

The advantage now is that this method should work for all components.

 

... And here a complete example with CascadingParameter:

MainLayout


@using System.ComponentModel
@using jsInteropTest.Data 
@inherits LayoutComponentBase



<TelerikRootComponent>
    <div class="page">
        <div class="sidebar">
            <NavMenu />
        </div>

        <div class="main">
            <div class="top-row px-4">
                <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
            </div>


            <div class="content px-4">
                <CascadingValue Value=@jsKey Name="KEY">
                    @Body
                </CascadingValue>
            </div>

        </div>
    </div>
</TelerikRootComponent>

@code
{
 
   
    public string jsKey { get; set; }

    private static Func<string, Task> KeyDownAction;

    private async Task LocalKeyDownAction(string value)
    {
        jsKey = value;    
        await InvokeAsync(StateHasChanged); 

    }

    [JSInvokable("jsKeyHandler")]
    public static async Task jsKeyHandler(object text)
    {
         
        await KeyDownAction(text.ToString());   


    }
   protected override void OnInitialized()
    {
        KeyDownAction = LocalKeyDownAction;
  
    }
   
   
}

the page/component with the grid:

 

 


@page "/" @using System.Collections.ObjectModel @using Microsoft.JSInterop; @inject IJSRuntime _jsRuntime <h1>Hello, world!</h1> <TelerikGrid Data = "@customers" > <GridColumns> <GridColumn Field = "@nameof(Customer.Name)" Title = "Name" ></GridColumn> <GridColumn Field = "@nameof(Customer.City)" Title = "City" ></GridColumn> </GridColumns> </TelerikGrid> <span> User pressed: @jsKey </span> @code{ [CascadingParameter(Name = "KEY")] string jsKey { get; set; }

public ObservableCollection<Customer> customers { get; set; } protected override void OnInitialized() { customers = new ObservableCollection<Customer>(); customers.Add(new Customer() { Name = "Tom", City = "Berlin" }); customers.Add(new Customer() { Name = "Tim", City = "New York" }); customers.Add(new Customer() { Name = "Jim", City = "Paris" }); base.OnInitialized(); } public classCustomer { publicstring Name { get; set; } publicstring City { get; set; } } }

As an attachment the complete code

 

 

0
Danny
Top achievements
Rank 1
Veteran
Iron
answered on 30 Jul 2021, 08:31 PM
Matthias, I tell you that it implements what you mention, and it does not enter the KeyPress of the div, the telerik grid steals the key event
0
Danny
Top achievements
Rank 1
Veteran
Iron
answered on 30 Jul 2021, 08:51 PM
Matthias, it works but with keyUp, not with keypress or keyDown
Tags
Grid
Asked by
Danny
Top achievements
Rank 1
Veteran
Iron
Answers by
Matthias
Top achievements
Rank 5
Bronze
Bronze
Iron
Danny
Top achievements
Rank 1
Veteran
Iron
Share this question
or