Under Review
Last Updated: 15 Jul 2020 11:53 by Miriam
Miriam
Created on: 14 Jul 2020 17:29
Category: Grid
Type: Feature Request
1
Focusout-Event in Grid
 Similar to the focusout-event of html-input...I want to do something after leaving a row.
5 comments
Miriam
Posted on: 15 Jul 2020 11:53
Thank you for your help! 
ADMIN
Marin Bratanov
Posted on: 15 Jul 2020 10:47

Hi Miriam,

The following snippet fires onfocusout when those inputs lose focus, and row click fires for the clicks on the rows (outside of the inputs, of course, the event needs to propagate to the grid in order to fire that event). I'm attaching also a short video that demonstrates the expected behavior.

<TelerikGrid Data=@GridData
             SelectionMode="@GridSelectionMode.Single"
             @bind-SelectedItems="@SelectedItems"
             Pageable="true"
             Height="400px" Navigable="true"
             OnRowClick="@OnRowClickHandler">
    <GridColumns>
        <GridColumn Field=@nameof(Employee.Name)>
            <Template>
                @{
                    <div class="text-right">
                        <input type="number" @onfocusout="@MyFocusOutHandler" />
                    </div>
                }
            </Template>
        </GridColumn>
        <GridColumn Field=@nameof(Employee.Team) Title="Team" />
    </GridColumns>
</TelerikGrid>


@code {
    async Task MyFocusOutHandler(FocusEventArgs e)
    {
        Console.WriteLine($"focus lost in the grid");
    }

    async Task OnRowClickHandler(GridRowClickEventArgs args)
    {
        var item = args.Item as Employee;

        Console.WriteLine(item.EmployeeId);
    }



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

    protected override void OnInitialized()
    {
        GridData = new List<Employee>();
        for (int i = 0; i < 15; i++)
        {
            GridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = "Employee " + i.ToString(),
                Team = "Team " + i % 3
            });
        }

        // select Employee with ID 4
        SelectedItems = GridData.Where(item => item.EmployeeId == 4).ToList();
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
    }
}

 

Regards,
Marin Bratanov
Progress Telerik

Attached Files:
Miriam
Posted on: 15 Jul 2020 09:03
Ok, now it works, but my OnRowClick is not triggered anymore that was working before.
Miriam
Posted on: 15 Jul 2020 08:56

 

Hi, unfortunately onfocusout is not triggered when I use it in a div. Just input works...

 

<GridColumn Field="@Name" Title="Name" Editable="true">
                            <Template>
                                @{
                                        <div class="text-right">
                                            <input type="number" @onfocusout="OnLostFocus" />
                                        </div>
                                    }
                                }
                            </Template>

</GridColumn>

ADMIN
Marin Bratanov
Posted on: 14 Jul 2020 17:32

While the grid is not as simple as an input, I am leaving this open for review so it can be considered.

In the meantime, you can capture the bubbled event on an element above the grid (note that it will fire for any focusout event under the grid - cells, pager, buttons, etc.)

<div @onfocusout="@MyFocusOutHandler">
    <TelerikGrid Data=@GridData
                    SelectionMode="@GridSelectionMode.Single"
                    @bind-SelectedItems="@SelectedItems"
                    Pageable="true"
                    Height="400px" Navigable="true">
        <GridColumns>
            <GridColumn Field=@nameof(Employee.Name) />
            <GridColumn Field=@nameof(Employee.Team) Title="Team" />
        </GridColumns>
    </TelerikGrid>
</div>

@code {
    async Task MyFocusOutHandler(FocusEventArgs e)
    {
        Console.WriteLine($"focus lost in the grid");
    }


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

    protected override void OnInitialized()
    {
        GridData = new List<Employee>();
        for (int i = 0; i < 15; i++)
        {
            GridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = "Employee " + i.ToString(),
                Team = "Team " + i % 3
            });
        }

        // select Employee with ID 4
        SelectedItems = GridData.Where(item => item.EmployeeId == 4).ToList();
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
    }
}

 

Regards,
Marin Bratanov
Progress Telerik