DataGrid RowRender Event is firing when using OnKeyUp/Down

Radzen.Blazor Components
1

Hi,

I want to use the KeyUp/Down events in the datagrid. I set the tabindex attribute to 0 for this, otherwise no key events (in the data grid) would be triggered. Now, however, the event (On)RowRender is also triggered for each event.

Is this "normal" behavior? Can this be deactivated somehow? Or have I implemented the function incorrectly?

I have a datagrid with a lot of data and conditional formatting, so that the OnRowRender events are no longer (can be) processed in real time, but it continues to process the queued events after the keyboard keys are released.

Below an image an the sample code:

image

@using Radzen

<div class="row">
    <div class="col-md-12">
        <RadzenDataGrid @ref="ProjectGrid" tabindex="0" AllowRowSelectOnRowClick="true" Data="@projectList" TItem="TestProject" SelectionMode="DataGridSelectionMode.Single" RowRender="OnRowRender" @bind-Value=@selectedProjectList
                        @onkeydown="@ProjectGridOnKeyDown" @onkeyup="@ProjectGridOnKeyUp">
            <Columns>
                <RadzenDataGridColumn TItem="TestProject" Property="Selecting" Width="60px" Sortable="false" Filterable="false">
                    <HeaderTemplate>
                        <RadzenCheckBox TriState="false" TValue="bool" Value="@(projectList.Any(i => selectedProjectList != null && selectedProjectList.Contains(i)))"
                                        Change="@(args => selectedProjectList = args ? ProjectGrid.View.ToList() : null)" />
                    </HeaderTemplate>
                    <Template Context="data">
                        <RadzenCheckBox TriState="false" Value="@(selectedProjectList != null && selectedProjectList.Contains(data))"
                                        TValue="bool" Change=@(args => this.ProjectGrid.SelectRow(data)) />
                    </Template>
                </RadzenDataGridColumn>
                <RadzenDataGridColumn TItem="TestProject" Property="Name" Title="Name" />
                <RadzenDataGridColumn TItem="TestProject" Property="Created" Title="Erstellt am" />
                <RadzenDataGridColumn TItem="TestProject" Property="Creator" Title="Erstellt von" />
                <RadzenDataGridColumn TItem="TestProject" Property="MacAddress" Title="Mac-Adresse" />
                <RadzenDataGridColumn TItem="TestProject" Property="Type" Title="Projekt-Typ">
                    <Template>
                        @context.Type.ToString()
                    </Template>
                </RadzenDataGridColumn>
                <RadzenDataGridColumn TItem="TestProject" Property="IsFinished" Title="Fertig?" Width="10%" TextAlign="TextAlign.Center" >
                    <Template>
                        <RadzenCheckBox @bind-Value="context.IsFinished" Disabled="true" />
                    </Template>
                    <EditTemplate Context="project">
                        <RadzenCheckBox @bind-Value="project.IsFinished" />
                    </EditTemplate>
                </RadzenDataGridColumn>
            </Columns>
        </RadzenDataGrid>
    </div>
</div>

@code {
    protected RadzenDataGrid<TestProject> ProjectGrid;
    protected List<TestProject> projectList = new List<TestProject>();
    public IList<TestProject> selectedProjectList { get; set; }
    private KeyboardEventArgs keyBoard { get; set; } = null;

    protected override void OnInitialized()
    {
        Console.WriteLine("OnInitializedAsync");
        this.projectList.Add(new TestProject("Testprojekt1", true, "FilteredUser", 1, DateTime.Today.AddDays(3), "AA:BB:CC:DD:EE:FF"));
        this.projectList.Add(new TestProject("Testprojekt2", false, "FilteredUser", 1, DateTime.Today.AddDays(2), "00:11:22:33:44:55"));
        this.projectList.Add(new TestProject("Testprojekt3", true, "FilteredUser", 2, DateTime.Today.AddDays(1), "66:77:88:99:00:AA"));
        this.projectList.Add(new TestProject("Testprojekt4", false, "NonFilteredUser", 1, DateTime.Today, "01:23:45:67:89:0A"));
        this.projectList.Add(new TestProject("Testprojekt5", true, "NonFilteredUser", 1, DateTime.Today.AddDays(-1), "AB:CD:EF:01:23:45"));
        this.projectList.Add(new TestProject("Testprojekt6", false, "NonFilteredUser", 2, DateTime.Today.AddDays(-2), "FE:DC:BA:98:76:54"));
    }

    public void ProjectGridOnKeyUp(KeyboardEventArgs e)
    {
        Console.WriteLine(DateTime.UtcNow.ToString("yyyy-MM-dd HH:mm:ss.fff") + " " + "ProjectGridOnKeyUp");
        // reset key press (key event)
        keyBoard = null;
    }

    public void ProjectGridOnKeyDown(KeyboardEventArgs e)
    {
        Console.WriteLine(DateTime.UtcNow.ToString("yyyy-MM-dd HH:mm:ss.fff") + " " + "ProjectGridOnKeyDown");
        keyBoard = e;
    }

    protected void OnRowRender(RowRenderEventArgs<TestProject> args)
    {
        Console.WriteLine(DateTime.UtcNow.ToString("yyyy-MM-dd HH:mm:ss.fff") + " " + "OnRowRender");
        args.Attributes.Add("style", $"background-color: #123456;");
    }

    public class TestProject {
        public string Name { get; set; }
        public DateTime Created { get; set; }
        public bool IsFinished { get; set; }
        public string Creator { get; set; }
        public int Type { get; set; }
        public string MacAddress { get; set; }

        public TestProject(string name, bool isFinished, string creator, int type, DateTime created, string macAddress)
        {
            this.Name = name;
            this.Created = created;
            this.IsFinished = isFinished;
            this.Creator = creator;
            this.Type = type;
            this.MacAddress = macAddress;
        }
    }

}
2

This is how Blazor works - it’s not something specific to Radzen.Blazor components.

3

Thanks for the hint.
For everyone who encounters the same problem, I can recommend the "ShouldRender" function.

See Microsoft article below

I added/changed the following code to disable rendering temporarily:

private bool shouldRender { get; set; } = true;
protected override bool ShouldRender() => shouldRender;

public void ProjectGridOnKeyUp(KeyboardEventArgs e)
{
     this.shouldRender = true;
     // reset key press (key event)
     this.keyBoard = null;
}

public void ProjectGridOnKeyDown(KeyboardEventArgs e)
{
     this.shouldRender = false;
     // only handle arrow up and arrow down in project grid, for mouse click see method "RowSelect"
     this.keyBoard = e;
}
1 Like