Skip to content

Commit b8bdc35

Browse files
authored
DataGrid: add ApplyDataGridVirtualization method extension (#6219)
* Add new ApplyDataGridVirtualization API * Update example in docs
1 parent 162f3da commit b8bdc35

File tree

4 files changed

+72
-54
lines changed

4 files changed

+72
-54
lines changed

Documentation/Blazorise.Docs/Models/Snippets.generated.cs

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8761,9 +8761,9 @@ @using Blazorise.DataGrid.Utils
87618761
Filterable
87628762
FilterMode=""DataGridFilterMode.Menu"">
87638763
<DataGridCommandColumn />
8764-
<DataGridColumn Field=""@nameof(Employee.FirstName)"" Caption=""First Name"" Editable />
8765-
<DataGridColumn Field=""@nameof(Employee.LastName)"" Caption=""Last Name"" Editable />
8766-
<DataGridSelectColumn TItem=""Employee"" Field=""@nameof( Employee.Gender )"" Caption=""Gender"" Editable Data=""EmployeeData.Genders"" ValueField=""(x) => ((Gender)x).Code"" TextField=""(x) => ((Gender)x).Description"" />
8764+
<DataGridColumn Field=""@nameof( Employee.FirstName )"" Caption=""First Name"" Editable />
8765+
<DataGridColumn Field=""@nameof( Employee.LastName )"" Caption=""Last Name"" Editable />
8766+
<DataGridSelectColumn TItem=""Employee"" Field=""@nameof( Employee.Gender )"" Caption=""Gender"" Editable Data=""EmployeeData.Genders"" ValueField=""( x ) => ( (Gender)x ).Code"" TextField=""( x ) => ( (Gender)x ).Description"" />
87678767
<DataGridNumericColumn Field=""@nameof( Employee.Childrens )"" Caption=""Childrens"" Editable />
87688768
<DataGridDateColumn Field=""@nameof( Employee.DateOfBirth )"" DisplayFormat=""{0:dd.MM.yyyy}"" Caption=""Date Of Birth"" Editable />
87698769
</DataGrid>
@@ -8782,28 +8782,27 @@ protected override async Task OnInitializedAsync()
87828782

87838783
private int totalEmployees;
87848784

8785-
private async Task OnReadData(DataGridReadDataEventArgs<Employee> e)
8785+
private async Task OnReadData( DataGridReadDataEventArgs<Employee> e )
87868786
{
8787-
8788-
if (!e.CancellationToken.IsCancellationRequested)
8787+
if ( !e.CancellationToken.IsCancellationRequested )
87898788
{
8790-
var query = employeeListSource.AsQueryable().ApplyDataGridSort(e.Columns).ApplyDataGridSearch(e.Columns);
8789+
var query = employeeListSource.AsQueryable().ApplyDataGridSort( e.Columns ).ApplyDataGridSearch( e.Columns );
87918790

8792-
if (dataGridRef.CustomFilter is not null)
8793-
query = query.Where(item => item != null && dataGridRef.CustomFilter(item));
8791+
if ( dataGridRef.CustomFilter is not null )
8792+
query = query.Where( item => item != null && dataGridRef.CustomFilter( item ) );
87948793

87958794
var response = new List<Employee>();
87968795

8797-
if (e.ReadDataMode is DataGridReadDataMode.Virtualize)
8798-
response = query.ApplyDataGridPaging(e.VirtualizeOffset + 1, e.VirtualizeCount).ToList();
8799-
else if (e.ReadDataMode is DataGridReadDataMode.Paging)
8800-
response = query.ApplyDataGridPaging(e.Page, e.PageSize).ToList();
8796+
if ( e.ReadDataMode is DataGridReadDataMode.Virtualize )
8797+
response = query.ApplyDataGridVirtualization( e.VirtualizeOffset, e.VirtualizeCount ).ToList();
8798+
else if ( e.ReadDataMode is DataGridReadDataMode.Paging )
8799+
response = query.ApplyDataGridPaging( e.Page, e.PageSize ).ToList();
88018800
else
8802-
throw new Exception(""Unhandled ReadDataMode"");
8801+
throw new Exception( ""Unhandled ReadDataMode"" );
88038802

8804-
await Task.Delay(Random.Shared.Next(100));
8803+
await Task.Delay( Random.Shared.Next( 100 ) );
88058804

8806-
if (!e.CancellationToken.IsCancellationRequested)
8805+
if ( !e.CancellationToken.IsCancellationRequested )
88078806
{
88088807
totalEmployees = query.Count();
88098808
employeeList = response;

Documentation/Blazorise.Docs/Pages/Docs/Extensions/DataGrid/Code/DataGridLargeDataExpressionCompilerExampleCode.html

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@
1414
<span class="htmlAttributeName">Filterable</span>
1515
<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>
1616
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">DataGridCommandColumn</span> <span class="htmlTagDelimiter">/&gt;</span>
17-
<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>
18-
<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>
19-
<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>
17+
<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>
18+
<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>
19+
<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>
2020
<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>
2121
<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>
2222
<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">DataGrid</span><span class="htmlTagDelimiter">&gt;</span>
@@ -36,28 +36,27 @@
3636

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

39-
<span class="keyword">private</span> <span class="keyword">async</span> Task OnReadData(DataGridReadDataEventArgs&lt;Employee&gt; e)
39+
<span class="keyword">private</span> <span class="keyword">async</span> Task OnReadData( DataGridReadDataEventArgs&lt;Employee&gt; e )
4040
{
41-
42-
<span class="keyword">if</span> (!e.CancellationToken.IsCancellationRequested)
41+
<span class="keyword">if</span> ( !e.CancellationToken.IsCancellationRequested )
4342
{
44-
<span class="keyword">var</span> query = employeeListSource.AsQueryable().ApplyDataGridSort(e.Columns).ApplyDataGridSearch(e.Columns);
43+
<span class="keyword">var</span> query = employeeListSource.AsQueryable().ApplyDataGridSort( e.Columns ).ApplyDataGridSearch( e.Columns );
4544

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

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

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

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

60-
<span class="keyword">if</span> (!e.CancellationToken.IsCancellationRequested)
59+
<span class="keyword">if</span> ( !e.CancellationToken.IsCancellationRequested )
6160
{
6261
totalEmployees = query.Count();
6362
employeeList = response;

Documentation/Blazorise.Docs/Pages/Docs/Extensions/DataGrid/Examples/DataGridLargeDataExpressionCompilerExample.razor

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@
1313
Filterable
1414
FilterMode="DataGridFilterMode.Menu">
1515
<DataGridCommandColumn />
16-
<DataGridColumn Field="@nameof(Employee.FirstName)" Caption="First Name" Editable />
17-
<DataGridColumn Field="@nameof(Employee.LastName)" Caption="Last Name" Editable />
18-
<DataGridSelectColumn TItem="Employee" Field="@nameof( Employee.Gender )" Caption="Gender" Editable Data="EmployeeData.Genders" ValueField="(x) => ((Gender)x).Code" TextField="(x) => ((Gender)x).Description" />
16+
<DataGridColumn Field="@nameof( Employee.FirstName )" Caption="First Name" Editable />
17+
<DataGridColumn Field="@nameof( Employee.LastName )" Caption="Last Name" Editable />
18+
<DataGridSelectColumn TItem="Employee" Field="@nameof( Employee.Gender )" Caption="Gender" Editable Data="EmployeeData.Genders" ValueField="( x ) => ( (Gender)x ).Code" TextField="( x ) => ( (Gender)x ).Description" />
1919
<DataGridNumericColumn Field="@nameof( Employee.Childrens )" Caption="Childrens" Editable />
2020
<DataGridDateColumn Field="@nameof( Employee.DateOfBirth )" DisplayFormat="{0:dd.MM.yyyy}" Caption="Date Of Birth" Editable />
2121
</DataGrid>
@@ -34,28 +34,27 @@
3434

3535
private int totalEmployees;
3636

37-
private async Task OnReadData(DataGridReadDataEventArgs<Employee> e)
37+
private async Task OnReadData( DataGridReadDataEventArgs<Employee> e )
3838
{
39-
40-
if (!e.CancellationToken.IsCancellationRequested)
39+
if ( !e.CancellationToken.IsCancellationRequested )
4140
{
42-
var query = employeeListSource.AsQueryable().ApplyDataGridSort(e.Columns).ApplyDataGridSearch(e.Columns);
41+
var query = employeeListSource.AsQueryable().ApplyDataGridSort( e.Columns ).ApplyDataGridSearch( e.Columns );
4342

44-
if (dataGridRef.CustomFilter is not null)
45-
query = query.Where(item => item != null && dataGridRef.CustomFilter(item));
43+
if ( dataGridRef.CustomFilter is not null )
44+
query = query.Where( item => item != null && dataGridRef.CustomFilter( item ) );
4645

4746
var response = new List<Employee>();
4847

49-
if (e.ReadDataMode is DataGridReadDataMode.Virtualize)
50-
response = query.ApplyDataGridPaging(e.VirtualizeOffset + 1, e.VirtualizeCount).ToList();
51-
else if (e.ReadDataMode is DataGridReadDataMode.Paging)
52-
response = query.ApplyDataGridPaging(e.Page, e.PageSize).ToList();
48+
if ( e.ReadDataMode is DataGridReadDataMode.Virtualize )
49+
response = query.ApplyDataGridVirtualization( e.VirtualizeOffset, e.VirtualizeCount ).ToList();
50+
else if ( e.ReadDataMode is DataGridReadDataMode.Paging )
51+
response = query.ApplyDataGridPaging( e.Page, e.PageSize ).ToList();
5352
else
54-
throw new Exception("Unhandled ReadDataMode");
53+
throw new Exception( "Unhandled ReadDataMode" );
5554

56-
await Task.Delay(Random.Shared.Next(100));
55+
await Task.Delay( Random.Shared.Next( 100 ) );
5756

58-
if (!e.CancellationToken.IsCancellationRequested)
57+
if ( !e.CancellationToken.IsCancellationRequested )
5958
{
6059
totalEmployees = query.Count();
6160
employeeList = response;

Source/Extensions/Blazorise.DataGrid/Utils/ExpressionCompiler.cs

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -308,13 +308,14 @@ public static IQueryable<TItem> ApplyDataGridSort<TItem>( this IQueryable<TItem>
308308
}
309309

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

329+
/// <summary>
330+
/// Applies virtualization to the specified queryable data source by skipping a specified number of items and
331+
/// taking a specified number of items.
332+
/// </summary>
333+
/// <typeparam name="TItem">The type of the elements in the data source.</typeparam>
334+
/// <param name="data">The queryable data source to apply virtualization to.</param>
335+
/// <param name="offset">The number of items to skip. Must be greater than or equal to 0.</param>
336+
/// <param name="count">The number of items to take. Must be greater than 0.</param>
337+
/// <returns>A queryable data source containing the specified range of items. If <paramref name="offset"/> is less than 0 or
338+
/// <paramref name="count"/> is less than or equal to 0, the original data source is returned.</returns>
339+
public static IQueryable<TItem> ApplyDataGridVirtualization<TItem>( this IQueryable<TItem> data, int offset, int count )
340+
{
341+
if ( offset >= 0 && count > 0 )
342+
{
343+
return data.Skip( offset ).Take( count );
344+
}
345+
346+
return data;
347+
}
348+
328349
/// <summary>
329350
/// Applies all the DataGrid filters to the queryable data.
330351
/// </summary>

0 commit comments

Comments
 (0)