Description
When an IgbColumn uses BodyTemplate (a Blazor side cell template, no JavaScript), and the grid data updates while the user scrolls, the grid becomes almost unresponsive.
I tested three versions of the same sample app. All of them show an IgbGrid with 10,000 rows and 10 columns. One column has a cell template. A button starts a timer that updates the first 100 rows once per second, by using the IgbGrid.NotifyUpdateItem method.
- Version A (📦BlazorWasmGrid_Script.zip) uses
BodyTemplateScript (a JavaScript side cell template). Scrolling stays smooth even while the timer updates data.
- Version B (📦BlazorWasmGrid_NoScript.zip) uses
BodyTemplate (a Blazor side cell template). Scrolling becomes almost frozen once the timer starts.
- Version C (📦BlazorWasmGrid_Express.zip) does not use
BodyTemplate at all. It renders the cell content with a custom Blazor side approach instead. Scrolling stays smooth, just like Version A.
Since Version C also renders on the Blazor side without JavaScript, and it stays smooth, the slowdown does not come from Blazor and JavaScript interop overhead in general. The slowdown looks specific to the built in BodyTemplate implementation.
I understand that BodyTemplate is expected to be somewhat slower than BodyTemplateScript. But this slowdown is too large for something as small as updating 100 rows once per second. I think this points to an actual problem in the BodyTemplate implementation, not just the normal cost difference between the two approaches.
I have raised this point before as well. Telling users to use BodyTemplateScript instead is not a real solution. In real applications, writing cell templates in JavaScript instead of Blazor can bring a maintenance cost that is too high to accept in many cases. Blazor developers want to write and maintain their UI code in C#, not in JavaScript.
I know that BodyTemplate performance was greatly improved in a past version. Given what I am seeing here, there may be another problem, or another code path, that this improvement did not cover.
Hosting Model
Blazor WebAssembly
.NET Version
10.0
Ignite UI for Blazor Version
26.1.98
Component / Area
Other
The dropdown above does not include Grid or Data Grid. This issue is about IgbGrid and IgbColumn BodyTemplate.
Browser
Chrome
Operating System
Windows
Steps to Reproduce
- Open the sample app that uses
IgbColumn.BodyTemplate (attached as a zip file).
- Scroll the grid vertically and horizontally. It scrolls smoothly.
- Click the "Start Data Updates" button. This starts a timer that updates the first 100 rows once per second.
- Try to scroll the grid again while the timer is running.
Actual Result
The grid becomes almost unresponsive. Scrolling barely works while the timer keeps updating rows.
Expected Result
Scrolling should stay smooth during the data updates, the same way it does when the cell template uses BodyTemplateScript or a custom Blazor side rendering approach instead of BodyTemplate.
Reproduction URL
N/A
Attachments
I attached zip files with the reproduction projects above.
Description
When an
IgbColumnusesBodyTemplate(a Blazor side cell template, no JavaScript), and the grid data updates while the user scrolls, the grid becomes almost unresponsive.I tested three versions of the same sample app. All of them show an
IgbGridwith 10,000 rows and 10 columns. One column has a cell template. A button starts a timer that updates the first 100 rows once per second, by using theIgbGrid.NotifyUpdateItemmethod.BodyTemplateScript(a JavaScript side cell template). Scrolling stays smooth even while the timer updates data.BodyTemplate(a Blazor side cell template). Scrolling becomes almost frozen once the timer starts.BodyTemplateat all. It renders the cell content with a custom Blazor side approach instead. Scrolling stays smooth, just like Version A.Since Version C also renders on the Blazor side without JavaScript, and it stays smooth, the slowdown does not come from Blazor and JavaScript interop overhead in general. The slowdown looks specific to the built in BodyTemplate implementation.
I understand that
BodyTemplateis expected to be somewhat slower thanBodyTemplateScript. But this slowdown is too large for something as small as updating 100 rows once per second. I think this points to an actual problem in theBodyTemplateimplementation, not just the normal cost difference between the two approaches.I have raised this point before as well. Telling users to use
BodyTemplateScriptinstead is not a real solution. In real applications, writing cell templates in JavaScript instead of Blazor can bring a maintenance cost that is too high to accept in many cases. Blazor developers want to write and maintain their UI code in C#, not in JavaScript.I know that
BodyTemplateperformance was greatly improved in a past version. Given what I am seeing here, there may be another problem, or another code path, that this improvement did not cover.Hosting Model
Blazor WebAssembly
.NET Version
10.0
Ignite UI for Blazor Version
26.1.98
Component / Area
Other
The dropdown above does not include Grid or Data Grid. This issue is about IgbGrid and IgbColumn BodyTemplate.
Browser
Chrome
Operating System
Windows
Steps to Reproduce
IgbColumn.BodyTemplate(attached as a zip file).Actual Result
The grid becomes almost unresponsive. Scrolling barely works while the timer keeps updating rows.
Expected Result
Scrolling should stay smooth during the data updates, the same way it does when the cell template uses BodyTemplateScript or a custom Blazor side rendering approach instead of BodyTemplate.
Reproduction URL
N/A
Attachments
I attached zip files with the reproduction projects above.