Skip to content

DataGrid: add ApplyDataGridVirtualization method extension #6219

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 11, 2025
Merged

DataGrid: add ApplyDataGridVirtualization method extension #6219

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d12e11a
Add new ApplyDataGridVirtualization API
stsrki Sep 10, 2025
0427bae
Update example in docs
stsrki Sep 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 15 additions & 16 deletions Documentation/Blazorise.Docs/Models/Snippets.generated.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8761,9 +8761,9 @@ @using Blazorise.DataGrid.Utils
Filterable
FilterMode=""DataGridFilterMode.Menu"">
<DataGridCommandColumn />
<DataGridColumn Field=""@nameof(Employee.FirstName)"" Caption=""First Name"" Editable />
<DataGridColumn Field=""@nameof(Employee.LastName)"" Caption=""Last Name"" Editable />
<DataGridSelectColumn TItem=""Employee"" Field=""@nameof( Employee.Gender )"" Caption=""Gender"" Editable Data=""EmployeeData.Genders"" ValueField=""(x) => ((Gender)x).Code"" TextField=""(x) => ((Gender)x).Description"" />
<DataGridColumn Field=""@nameof( Employee.FirstName )"" Caption=""First Name"" Editable />
<DataGridColumn Field=""@nameof( Employee.LastName )"" Caption=""Last Name"" Editable />
<DataGridSelectColumn TItem=""Employee"" Field=""@nameof( Employee.Gender )"" Caption=""Gender"" Editable Data=""EmployeeData.Genders"" ValueField=""( x ) => ( (Gender)x ).Code"" TextField=""( x ) => ( (Gender)x ).Description"" />
<DataGridNumericColumn Field=""@nameof( Employee.Childrens )"" Caption=""Childrens"" Editable />
<DataGridDateColumn Field=""@nameof( Employee.DateOfBirth )"" DisplayFormat=""{0:dd.MM.yyyy}"" Caption=""Date Of Birth"" Editable />
</DataGrid>
Expand All @@ -8782,28 +8782,27 @@ protected override async Task OnInitializedAsync()

private int totalEmployees;

private async Task OnReadData(DataGridReadDataEventArgs<Employee> e)
private async Task OnReadData( DataGridReadDataEventArgs<Employee> e )
{

if (!e.CancellationToken.IsCancellationRequested)
if ( !e.CancellationToken.IsCancellationRequested )
{
var query = employeeListSource.AsQueryable().ApplyDataGridSort(e.Columns).ApplyDataGridSearch(e.Columns);
var query = employeeListSource.AsQueryable().ApplyDataGridSort( e.Columns ).ApplyDataGridSearch( e.Columns );

if (dataGridRef.CustomFilter is not null)
query = query.Where(item => item != null && dataGridRef.CustomFilter(item));
if ( dataGridRef.CustomFilter is not null )
query = query.Where( item => item != null && dataGridRef.CustomFilter( item ) );

var response = new List<Employee>();

if (e.ReadDataMode is DataGridReadDataMode.Virtualize)
response = query.ApplyDataGridPaging(e.VirtualizeOffset + 1, e.VirtualizeCount).ToList();
else if (e.ReadDataMode is DataGridReadDataMode.Paging)
response = query.ApplyDataGridPaging(e.Page, e.PageSize).ToList();
if ( e.ReadDataMode is DataGridReadDataMode.Virtualize )
response = query.ApplyDataGridVirtualization( e.VirtualizeOffset, e.VirtualizeCount ).ToList();
else if ( e.ReadDataMode is DataGridReadDataMode.Paging )
response = query.ApplyDataGridPaging( e.Page, e.PageSize ).ToList();
else
throw new Exception(""Unhandled ReadDataMode"");
throw new Exception( ""Unhandled ReadDataMode"" );

await Task.Delay(Random.Shared.Next(100));
await Task.Delay( Random.Shared.Next( 100 ) );

if (!e.CancellationToken.IsCancellationRequested)
if ( !e.CancellationToken.IsCancellationRequested )
{
totalEmployees = query.Count();
employeeList = response;
Expand Down
31 changes: 15 additions & 16 deletions ...s/Pages/Docs/Extensions/DataGrid/Code/DataGridLargeDataExpressionCompilerExampleCode.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@
<span class="htmlAttributeName">Filterable</span>
<span class="htmlAttributeName">FilterMode</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">DataGridFilterMode</span><span class="enumValue">.Menu</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">DataGridCommandColumn</span> <span class="htmlTagDelimiter">/&gt;</span>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">DataGridColumn</span> <span class="htmlAttributeName">Field</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue"><span class="atSign">&#64;</span>nameof(Employee.FirstName)</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Caption</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">First Name</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Editable</span> <span class="htmlTagDelimiter">/&gt;</span>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">DataGridColumn</span> <span class="htmlAttributeName">Field</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue"><span class="atSign">&#64;</span>nameof(Employee.LastName)</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Caption</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">Last Name</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Editable</span> <span class="htmlTagDelimiter">/&gt;</span>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">DataGridSelectColumn</span> <span class="htmlAttributeName">TItem</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">Employee</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Field</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue"><span class="atSign">&#64;</span>nameof( Employee.Gender )</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Caption</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">Gender</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Editable</span> <span class="htmlAttributeName">Data</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">EmployeeData</span><span class="enumValue">.Genders</span><span class="quot">&quot;</span> <span class="htmlAttributeName">ValueField</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">(x) =&gt; ((Gender)x).Code</span><span class="quot">&quot;</span> <span class="htmlAttributeName">TextField</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">(x) =&gt; ((Gender)x).Description</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">DataGridColumn</span> <span class="htmlAttributeName">Field</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue"><span class="atSign">&#64;</span>nameof( Employee.FirstName )</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Caption</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">First Name</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Editable</span> <span class="htmlTagDelimiter">/&gt;</span>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">DataGridColumn</span> <span class="htmlAttributeName">Field</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue"><span class="atSign">&#64;</span>nameof( Employee.LastName )</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Caption</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">Last Name</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Editable</span> <span class="htmlTagDelimiter">/&gt;</span>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">DataGridSelectColumn</span> <span class="htmlAttributeName">TItem</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">Employee</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Field</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue"><span class="atSign">&#64;</span>nameof( Employee.Gender )</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Caption</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">Gender</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Editable</span> <span class="htmlAttributeName">Data</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">EmployeeData</span><span class="enumValue">.Genders</span><span class="quot">&quot;</span> <span class="htmlAttributeName">ValueField</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">( x ) =&gt; ( (Gender)x ).Code</span><span class="quot">&quot;</span> <span class="htmlAttributeName">TextField</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">( x ) =&gt; ( (Gender)x ).Description</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">DataGridNumericColumn</span> <span class="htmlAttributeName">Field</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue"><span class="atSign">&#64;</span>nameof( Employee.Childrens )</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Caption</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">Childrens</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Editable</span> <span class="htmlTagDelimiter">/&gt;</span>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">DataGridDateColumn</span> <span class="htmlAttributeName">Field</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue"><span class="atSign">&#64;</span>nameof( Employee.DateOfBirth )</span><span class="quot">&quot;</span> <span class="htmlAttributeName">DisplayFormat</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">{0:dd.MM.yyyy}</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Caption</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">Date Of Birth</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Editable</span> <span class="htmlTagDelimiter">/&gt;</span>
<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">DataGrid</span><span class="htmlTagDelimiter">&gt;</span>
Expand All @@ -36,28 +36,27 @@

<span class="keyword">private</span> <span class="keyword">int</span> totalEmployees;

<span class="keyword">private</span> <span class="keyword">async</span> Task OnReadData(DataGridReadDataEventArgs&lt;Employee&gt; e)
<span class="keyword">private</span> <span class="keyword">async</span> Task OnReadData( DataGridReadDataEventArgs&lt;Employee&gt; e )
{

<span class="keyword">if</span> (!e.CancellationToken.IsCancellationRequested)
<span class="keyword">if</span> ( !e.CancellationToken.IsCancellationRequested )
{
<span class="keyword">var</span> query = employeeListSource.AsQueryable().ApplyDataGridSort(e.Columns).ApplyDataGridSearch(e.Columns);
<span class="keyword">var</span> query = employeeListSource.AsQueryable().ApplyDataGridSort( e.Columns ).ApplyDataGridSearch( e.Columns );

<span class="keyword">if</span> (dataGridRef.CustomFilter <span class="keyword">is</span> not <span class="keyword">null</span>)
query = query.Where(item =&gt; item != <span class="keyword">null</span> &amp;&amp; dataGridRef.CustomFilter(item));
<span class="keyword">if</span> ( dataGridRef.CustomFilter <span class="keyword">is</span> not <span class="keyword">null</span> )
query = query.Where( item =&gt; item != <span class="keyword">null</span> &amp;&amp; dataGridRef.CustomFilter( item ) );

<span class="keyword">var</span> response = <span class="keyword">new</span> List&lt;Employee&gt;();

<span class="keyword">if</span> (e.ReadDataMode <span class="keyword">is</span> DataGridReadDataMode.Virtualize)
response = query.ApplyDataGridPaging(e.VirtualizeOffset + <span class="number">1</span>, e.VirtualizeCount).ToList();
<span class="keyword">else</span> <span class="keyword">if</span> (e.ReadDataMode <span class="keyword">is</span> DataGridReadDataMode.Paging)
response = query.ApplyDataGridPaging(e.Page, e.PageSize).ToList();
<span class="keyword">if</span> ( e.ReadDataMode <span class="keyword">is</span> DataGridReadDataMode.Virtualize )
response = query.ApplyDataGridVirtualization( e.VirtualizeOffset, e.VirtualizeCount ).ToList();
<span class="keyword">else</span> <span class="keyword">if</span> ( e.ReadDataMode <span class="keyword">is</span> DataGridReadDataMode.Paging )
response = query.ApplyDataGridPaging( e.Page, e.PageSize ).ToList();
<span class="keyword">else</span>
<span class="keyword">throw</span> <span class="keyword">new</span> Exception(<span class="string">&quot;Unhandled ReadDataMode&quot;</span>);
<span class="keyword">throw</span> <span class="keyword">new</span> Exception( <span class="string">&quot;Unhandled ReadDataMode&quot;</span> );

<span class="keyword">await</span> Task.Delay(Random.Shared.Next(<span class="number">100</span>));
<span class="keyword">await</span> Task.Delay( Random.Shared.Next( <span class="number">100</span> ) );

<span class="keyword">if</span> (!e.CancellationToken.IsCancellationRequested)
<span class="keyword">if</span> ( !e.CancellationToken.IsCancellationRequested )
{
totalEmployees = query.Count();
employeeList = response;
Expand Down
31 changes: 15 additions & 16 deletions .../Pages/Docs/Extensions/DataGrid/Examples/DataGridLargeDataExpressionCompilerExample.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@
Filterable
FilterMode="DataGridFilterMode.Menu">
<DataGridCommandColumn />
<DataGridColumn Field="@nameof(Employee.FirstName)" Caption="First Name" Editable />
<DataGridColumn Field="@nameof(Employee.LastName)" Caption="Last Name" Editable />
<DataGridSelectColumn TItem="Employee" Field="@nameof( Employee.Gender )" Caption="Gender" Editable Data="EmployeeData.Genders" ValueField="(x) => ((Gender)x).Code" TextField="(x) => ((Gender)x).Description" />
<DataGridColumn Field="@nameof( Employee.FirstName )" Caption="First Name" Editable />
<DataGridColumn Field="@nameof( Employee.LastName )" Caption="Last Name" Editable />
<DataGridSelectColumn TItem="Employee" Field="@nameof( Employee.Gender )" Caption="Gender" Editable Data="EmployeeData.Genders" ValueField="( x ) => ( (Gender)x ).Code" TextField="( x ) => ( (Gender)x ).Description" />
<DataGridNumericColumn Field="@nameof( Employee.Childrens )" Caption="Childrens" Editable />
<DataGridDateColumn Field="@nameof( Employee.DateOfBirth )" DisplayFormat="{0:dd.MM.yyyy}" Caption="Date Of Birth" Editable />
</DataGrid>
Expand All @@ -34,28 +34,27 @@

private int totalEmployees;

private async Task OnReadData(DataGridReadDataEventArgs<Employee> e)
private async Task OnReadData( DataGridReadDataEventArgs<Employee> e )
{

if (!e.CancellationToken.IsCancellationRequested)
if ( !e.CancellationToken.IsCancellationRequested )
{
var query = employeeListSource.AsQueryable().ApplyDataGridSort(e.Columns).ApplyDataGridSearch(e.Columns);
var query = employeeListSource.AsQueryable().ApplyDataGridSort( e.Columns ).ApplyDataGridSearch( e.Columns );

if (dataGridRef.CustomFilter is not null)
query = query.Where(item => item != null && dataGridRef.CustomFilter(item));
if ( dataGridRef.CustomFilter is not null )
query = query.Where( item => item != null && dataGridRef.CustomFilter( item ) );

var response = new List<Employee>();

if (e.ReadDataMode is DataGridReadDataMode.Virtualize)
response = query.ApplyDataGridPaging(e.VirtualizeOffset + 1, e.VirtualizeCount).ToList();
else if (e.ReadDataMode is DataGridReadDataMode.Paging)
response = query.ApplyDataGridPaging(e.Page, e.PageSize).ToList();
if ( e.ReadDataMode is DataGridReadDataMode.Virtualize )
response = query.ApplyDataGridVirtualization( e.VirtualizeOffset, e.VirtualizeCount ).ToList();
else if ( e.ReadDataMode is DataGridReadDataMode.Paging )
response = query.ApplyDataGridPaging( e.Page, e.PageSize ).ToList();
else
throw new Exception("Unhandled ReadDataMode");
throw new Exception( "Unhandled ReadDataMode" );

await Task.Delay(Random.Shared.Next(100));
await Task.Delay( Random.Shared.Next( 100 ) );

if (!e.CancellationToken.IsCancellationRequested)
if ( !e.CancellationToken.IsCancellationRequested )
{
totalEmployees = query.Count();
employeeList = response;
Expand Down
33 changes: 27 additions & 6 deletions Source/Extensions/Blazorise.DataGrid/Utils/ExpressionCompiler.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -308,13 +308,14 @@ public static IQueryable<TItem> ApplyDataGridSort<TItem>( this IQueryable<TItem>
}

/// <summary>
/// Applies the paging filter to the queryable data.
/// Applies paging to the specified <see cref="IQueryable{T}"/> based on the provided page number and page size.
/// </summary>
/// <typeparam name="TItem"></typeparam>
/// <param name="data">The Data to be queried</param>
/// <param name="page">The current page</param>
/// <param name="pageSize">The page size</param>
/// <returns></returns>
/// <typeparam name="TItem">The type of the elements in the queryable data source.</typeparam>
/// <param name="data">The queryable data source to which paging will be applied.</param>
/// <param name="page">The page number to retrieve. Must be greater than 0.</param>
/// <param name="pageSize">The number of items per page. Must be greater than 0.</param>
/// <returns>A new <see cref="IQueryable{T}"/> containing the items for the specified page, or the original data source if
/// <paramref name="page"/> or <paramref name="pageSize"/> is less than or equal to 0.</returns>
public static IQueryable<TItem> ApplyDataGridPaging<TItem>( this IQueryable<TItem> data, int page, int pageSize )
{
if ( page > 0 && pageSize > 0 )
Expand All @@ -325,6 +326,26 @@ public static IQueryable<TItem> ApplyDataGridPaging<TItem>( this IQueryable<TIte
return data;
}

/// <summary>
/// Applies virtualization to the specified queryable data source by skipping a specified number of items and
/// taking a specified number of items.
/// </summary>
/// <typeparam name="TItem">The type of the elements in the data source.</typeparam>
/// <param name="data">The queryable data source to apply virtualization to.</param>
/// <param name="offset">The number of items to skip. Must be greater than or equal to 0.</param>
/// <param name="count">The number of items to take. Must be greater than 0.</param>
/// <returns>A queryable data source containing the specified range of items. If <paramref name="offset"/> is less than 0 or
/// <paramref name="count"/> is less than or equal to 0, the original data source is returned.</returns>
public static IQueryable<TItem> ApplyDataGridVirtualization<TItem>( this IQueryable<TItem> data, int offset, int count )
{
if ( offset >= 0 && count > 0 )
{
return data.Skip( offset ).Take( count );
}

return data;
}

/// <summary>
/// Applies all the DataGrid filters to the queryable data.
/// </summary>
Expand Down
Loading