Performance Issues with DataGrid Using DatePicker in Virtualized Grid

Radzen.Blazor Components
1

Hi Radzen Team,

I recently purchased Radzen Blazor Studio to develop internal company apps. I’ve encountered a significant performance issue with the DataGrid. Here's the setup:

  • 19 columns, 26 rows visible at a time
  • Virtualization enabled to load records on scroll
  • Each row includes two buttons, an edit field, an input box, and a DatePicker

The issue arises when adding the DatePicker to each row. Performance drops drastically, making virtualization nearly unusable. Users need to scroll smoothly through records and edit dates directly in the grid without switching to an edit mode or using save buttons.

I suspect the slowdown happens because the DatePicker is rendering in the background for all 26 visible rows. Is there a way to:

  1. Replace the DatePicker with a text box by default, and trigger the DatePicker only when the user clicks a button?
  2. Maintain a streamlined way to edit dates without the performance hit?

Any advice on optimizing this would be greatly appreciated!

Thank you

2

The bigger the rendering the slower will be the Blazor content update performance. By default DatePicker component PopupRenderMode is set to PopupRenderMode.Initial, try to set it to PopupRenderMode.OnDemand to tell the component to render the popup with calendar on demand (when clicked to open). Other possible solution can be use similar to this demo technique where the editor is created on cell click not initially: