Blazorise DataGrid: Large Data

The DataGrid Read Data feature allows you to handle Large Data by providing you with a centralized ReadData Method that allows you to query your data by pages.

Large Data

By default, DataGrid will load everything in memory and it will perform the necessary operations like paging, sorting and filtering. For large datasets this is impractical and so for these scenarios it is advised to load data page-by-page.

This is accomplished with the use of ReadData event handler and TotalItems attribute. When you define the usage of ReadData the DataGrid will automatically switch to manual mode and every interaction with the grid will be proxied through the ReadData. This means that you as a developer will be responsible for all the loading, filtering and sorting of the data.

  • ReadData event handler used to handle the loading of data
  • TotalItems total number of items in the source data-set

Bellow you can find a basic example of how to load large data and apply it to the DataGrid. Just as in the previous example everything is the same except that now we must define the attribute ReadData and TotalItems. They’re used to handle all of the loading, filtering and sorting of an actual data.

Additionally you will find the support for generating an ODataQuery by using the provided extension ToODataString.

#
First Name
Last Name
Salary
1SamuelCollier86 030,41 €
2IrvinZiemann61 781,31 €
3GeraldPollich58 810,75 €
4CoraConn84 414,66 €
5AlfonsoD'Amore69 318,29 €
6JessieWilkinson78 566,12 €
7GregoryRenner57 456,82 €
8MaryannHilpert89 153,38 €
9MerlePacocha55 349,94 €
10AngelinaWard73 625,86 €
11KaraBrekke58 321,87 €
12YvetteFerry89 658,90 €
13PabloFriesen77 090,27 €
14ErnestHomenick54 910,14 €
15LeslieWehner78 930,58 €
16MiguelLynch65 348,06 €
17TommySwaniawski92 326,27 €
18ViolaWilderman76 575,00 €
19BrendaJacobson86 145,68 €
20RogerHerzog53 168,45 €
21CaseyWeber56 257,49 €
22TaraSchoen72 637,29 €
23AlSanford88 870,12 €
24JillStokes59 252,89 €
25MarianArmstrong69 182,74 €
26JanieStanton51 608,79 €
27DixieBlock89 653,26 €
28TeresaDietrich56 151,34 €
29ReneeHerzog93 592,47 €
30DamonLubowitz89 271,37 €
31CodyRau63 067,69 €
32EthelKassulke92 175,30 €
33RudyWalsh76 356,17 €
34RossHauck51 620,31 €
35OtisLittle77 906,94 €
36BenjaminFriesen78 343,54 €
37MosesMosciski99 202,48 €
38KellieMurazik98 314,89 €
39NicholeKeebler65 412,00 €
40BobbieRogahn52 889,16 €
41CharlieBorer50 448,59 €
42LuisRutherford83 594,06 €
43JaredPfannerstill54 282,76 €
44FloydSatterfield59 157,17 €
45ClaudeParker58 576,97 €
46DonaldDaugherty66 692,86 €
47RolandBruen98 404,23 €
48PaulineConroy69 674,96 €
49LoraLockman74 035,99 €
50JoeyKoelpin57 184,86 €
51StaceyGraham88 562,39 €
52DaisyMedhurst51 011,13 €
53ErinCorwin70 013,81 €
54ArturoDenesik61 456,56 €
55CherylCollier59 868,88 €
56AndresWilliamson74 180,71 €
57PhyllisWilderman59 518,29 €
58BillyWiza92 241,90 €
59WoodrowGibson90 288,10 €
60CristinaHarris81 762,53 €
61DarleneDaniel74 142,55 €
62CourtneyFrami68 435,70 €
63MaeFeeney65 623,26 €
64JoshDoyle87 057,60 €
65GwenAbbott65 189,89 €
66MonaBeier80 367,71 €
67MinnieCorwin78 002,56 €
68DwightRunolfsson73 986,40 €
69BethBartell85 841,65 €
70SteveSchulist94 190,45 €
71PamGreenholt75 695,28 €
72DarrelWilliamson70 327,72 €
73RolandoSauer84 971,22 €
74CesarSchaefer92 704,04 €
75LuisLeannon61 167,01 €
76FannieWilliamson94 194,50 €
77MariannePouros71 394,54 €
78SpencerRogahn55 993,84 €
79DonnieLuettgen77 655,38 €
80BlancaBreitenberg75 633,97 €
81PatRohan50 151,72 €
82VirginiaKassulke77 411,81 €
83LelaBreitenberg53 894,64 €
84RandalKoss93 602,37 €
85KimberlyChristiansen65 089,52 €
86JeanBoyer99 805,01 €
87MurielShields66 809,95 €
88MarcusEmmerich99 401,27 €
89FaithNicolas50 439,25 €
90BoydDavis58 591,48 €
91WilburStiedemann64 479,16 €
92RobertoStracke57 007,18 €
93MindySmitham56 810,55 €
94DianneMaggio73 990,94 €
95MandyBahringer69 018,94 €
96MarlonLedner72 372,09 €
97LaverneSchuster84 767,07 €
98KendraCorkery79 303,18 €
99ChrisBarton68 642,57 €
100EdPrice84 665,20 €
101TraceyDurgan63 539,54 €
102AlyssaGaylord92 963,65 €
103HelenMueller51 704,43 €
104RonaldMoen88 173,43 €
105GerardMcDermott79 616,46 €
106SamanthaZboncak75 298,13 €
107VanGleichner90 917,71 €
108FrederickBode52 949,98 €
109LelaGutmann52 247,22 €
110HarveyGutmann82 998,73 €
111LuisRobel91 952,69 €
112BrandiWard70 341,50 €
113MargieHills93 092,75 €
114TobyBeatty66 829,50 €
115BobbyWard82 475,01 €
116JasonBarrows87 777,57 €
117FrancisUllrich69 615,22 €
118HermanMarquardt84 744,26 €
119FrancisGleason58 666,45 €
120CarolynKunze80 404,42 €
121TerryRogahn69 352,10 €
122KendraSenger93 641,61 €
123RochelleKessler96 931,95 €
124YvonneHalvorson94 598,15 €
125KendraBernhard59 931,41 €
126KatherinePrice60 998,60 €
127LillianWyman52 545,83 €
128VelmaWunsch74 742,06 €
129KristyHerman96 811,63 €
130ErickParker88 902,23 €
131DeanJohnston72 987,32 €
132PhillipBrekke69 227,78 €
133AshleyBlick74 736,25 €
134LarryFeeney76 448,86 €
135KaylaGlover97 369,33 €
136AlvinSimonis62 546,08 €
137KevinKassulke80 076,32 €
138TeresaO'Kon87 065,63 €
139EllaCartwright90 099,49 €
140AlbertHowe50 647,80 €
141AndrewPfeffer99 691,54 €
142GarrettJenkins56 963,04 €
143LouisKuvalis80 519,61 €
144MyrtleTromp69 930,94 €
145AndrewMurphy55 579,15 €
146PatriciaGaylord89 805,17 €
147PrestonKuvalis83 615,78 €
148MerleOsinski92 220,65 €
149AlbertoBernhard52 655,29 €
150DarrellBeatty54 224,58 €
151JoanneBartoletti53 083,34 €
152GloriaBahringer65 360,79 €
153CameronHane74 440,82 €
154ConradDooley79 099,12 €
155ErikMarks93 408,43 €
156CarolynWolff97 583,81 €
157SilviaO'Hara72 185,23 €
158DexterHettinger90 261,40 €
159MargaretLedner62 783,44 €
160EllisHerzog60 940,26 €
161MerleBahringer53 660,05 €
162RobertoYost61 169,10 €
163StacyKuhlman93 823,76 €
164CoreyMonahan57 966,22 €
165ChelseaSawayn52 049,90 €
166CliftonMills68 356,52 €
167TeriKling67 176,87 €
168TanyaFarrell58 393,52 €
169MarianneCarroll92 390,80 €
170RosaliePurdy86 463,78 €
171ShirleyGreenfelder91 685,68 €
172DeloresSteuber94 113,92 €
173TerriKlein68 647,08 €
174MarjorieBeahan84 706,53 €
175ReginaldReinger85 323,79 €
176KelleyBode79 071,76 €
177LorenHowell93 204,93 €
178LindseySmith99 085,43 €
179DougWilkinson79 267,68 €
180BernadetteWatsica77 302,18 €
181BillyVolkman68 235,94 €
182CourtneyReinger54 541,73 €
183MarjorieDietrich51 211,89 €
184MeghanPollich62 102,58 €
185PhillipSmitham79 097,74 €
186VernaKlocko66 963,02 €
187RodolfoMertz57 742,48 €
188SabrinaHyatt82 874,64 €
189RogerLehner85 927,11 €
190JuliaHuels67 309,00 €
191MayReynolds96 990,64 €
192BennieWilliamson67 591,28 €
193EvanOkuneva79 220,93 €
194DianaRohan78 141,34 €
195ShariSmitham60 195,83 €
196EllaSchiller83 482,98 €
197KarenTowne54 088,60 €
198KellyJones78 290,86 €
199RobinLesch66 805,27 €
200GuyMayert68 127,67 €
201MistyOndricka75 954,94 €
202JuliusWhite78 706,96 €
203JoshGaylord60 487,10 €
204DebraJohnston83 953,91 €
205KellieMarks64 800,44 €
206TaylorGoodwin83 261,10 €
207LeeMetz98 403,81 €
208EddieMurazik68 029,89 €
209ErnestoMcLaughlin99 436,01 €
210LaurenceTurner51 909,85 €
211HazelVandervort94 267,75 €
212CeceliaNader74 472,40 €
213PhilLedner68 881,51 €
214KrystalMetz83 250,52 €
215DonAltenwerth52 897,75 €
216CandaceMcCullough96 247,14 €
217SabrinaGulgowski50 276,69 €
218LaurenceBatz64 410,12 €
219ShaneRippin75 551,08 €
220BernadetteMorissette98 512,13 €
221AlexanderWest61 698,25 €
222StellaMcKenzie78 466,06 €
223ArleneParker57 641,64 €
224BrettDurgan67 162,65 €
225MurielTremblay78 588,45 €
226AdamUpton88 672,89 €
227LesterBartell59 093,66 €
228CristinaStreich81 916,04 €
229ErnestineHeathcote71 069,20 €
230ClarenceEmard82 071,65 €
231MonaKertzmann56 353,15 €
232TraceyPfeffer91 484,81 €
233TonyHartmann80 992,77 €
234HarryTreutel51 423,99 €
235ErvinTillman82 561,69 €
236DerekSchoen95 956,53 €
237AnthonyPrice74 884,58 €
238ShariZboncak96 737,83 €
239GlennLeannon63 534,18 €
240GuyTreutel60 108,71 €
241AngieHoppe65 635,04 €
242CatherineBartell98 196,01 €
243TimmyTorp54 958,10 €
244WalterSchimmel51 050,65 €
245CeciliaLakin95 127,62 €
246ColinReichel66 112,87 €
247VictoriaDeckow60 492,50 €
248HomerCormier90 229,04 €
249SpencerO'Reilly60 243,52 €
250AllanHand59 170,08 €
251CameronOndricka79 858,60 €
252MarkBins52 790,83 €
253JaimeJacobson76 493,75 €
254IrmaWatsica58 546,05 €
255ShaunBraun59 642,92 €
256DianaEffertz82 583,67 €
257StevenDooley64 657,62 €
258IrmaKovacek94 208,96 €
259EmmettHerzog67 817,81 €
260KellyDavis71 400,98 €
261LuzMorar64 577,48 €
262MartaHarris66 971,72 €
263MabelWolff74 724,96 €
264SamuelGutkowski60 034,46 €
265EmmaEmmerich72 648,66 €
266IrvinMitchell50 003,10 €
267NicolasHalvorson71 526,27 €
268CharlieJerde73 030,99 €
269RamonaDibbert74 358,11 €
270CliftonKlein97 270,09 €
271StellaSteuber59 692,64 €
272JuanitaChamplin72 780,75 €
273IsaacStamm69 292,97 €
274DoyleSchumm51 427,45 €
275ClayGrimes51 772,08 €
276RolandMayert81 883,80 €
277EdmondBahringer50 929,17 €
278RandallDaniel89 905,30 €
279GregorySpencer74 161,60 €
280OwenSwaniawski95 707,25 €
281LavernePacocha65 789,34 €
282SaraShields86 180,98 €
283ChristianHoeger71 363,32 €
284DamonDenesik55 400,84 €
285MarjorieEmmerich63 652,59 €
286TashaBorer94 186,62 €
287JosephKris67 814,68 €
288BethanyBeer65 998,18 €
289TerranceThiel80 137,01 €
290BobCasper68 748,43 €
291JoeLakin98 278,19 €
292LeeWolff94 738,69 €
293AlvinSmith68 593,23 €
294JimmieDietrich84 267,88 €
295TyroneDach94 728,32 €
296VanMills60 109,47 €
297TedGibson65 825,81 €
298RoxanneKuhn79 023,74 €
299ReginaKeeling66 369,94 €
300HelenWitting74 575,87 €
301OliverDaniel54 641,11 €
302DougLeannon76 076,55 €
303CarolSchmeler83 833,88 €
304DonMills53 632,72 €
305LindseyConsidine98 571,25 €
306GraceNader82 399,49 €
307CandiceRodriguez90 887,74 €
308LulaSchultz97 039,29 €
309LeeBins71 842,44 €
310SaulHowe52 676,35 €
311LouiseGislason88 305,26 €
312MyrtleHackett68 996,49 €
313CaseyZemlak57 259,51 €
314KristenHuel54 689,50 €
315KristaKris93 758,65 €
316DanielleJerde99 301,40 €
317AngelicaTremblay85 313,90 €
318LouiseAbshire77 784,92 €
319WmBogisich62 126,09 €
320MaryannWisoky85 135,69 €
321BetsyWisozk77 627,62 €
322AlexanderStoltenberg99 611,36 €
323JudithFlatley77 310,19 €
324StewartTreutel50 889,65 €
325HelenSchiller73 442,69 €
326HeidiHaag51 397,29 €
327RossThiel92 754,54 €
328AmandaSenger89 441,31 €
329BethHilpert62 114,78 €
330CurtisHessel57 498,77 €
331AlmaGibson90 762,65 €
332JeannetteSchaden96 075,03 €
333RobertoHerman97 894,29 €
334ClarenceBlanda50 450,45 €
335JefferyKassulke55 046,88 €
336TrevorSchuppe80 338,20 €
337RonLebsack55 184,82 €
338CedricAuer67 321,90 €
339GinaSchiller89 055,19 €
340JuliusSchmidt69 183,31 €
341BrandiCorkery67 152,53 €
342AliciaMcClure93 251,90 €
343MicheleWaters92 624,38 €
344KristenHoeger60 848,20 €
345KateHeathcote62 751,58 €
346RudolphLeffler90 085,95 €
347GarryMcCullough87 440,86 €
348TraceyRutherford71 584,47 €
349ShellyBartoletti95 964,97 €
350JohnnyPadberg91 804,24 €
351DavidSmitham68 092,90 €
352PriscillaConroy92 922,27 €
353ShannonEmard53 804,17 €
354PaulaKautzer53 365,86 €
355JayDouglas62 473,03 €
356WesleyTorphy54 390,81 €
357LorraineWilliamson80 333,70 €
358JohannaHahn55 954,42 €
359AlexanderMertz99 571,59 €
360WilsonBruen64 776,40 €
361HubertPfannerstill63 008,59 €
362AlanO'Kon80 885,59 €
363WillieMetz51 930,24 €
364JoeyFerry94 608,69 €
365RickyHermann83 772,49 €
366DevinStamm94 867,24 €
367JoshuaHomenick76 817,11 €
368LarryDaugherty73 207,94 €
369ClaudeGleason85 370,52 €
370SammyMurazik69 384,89 €
371AngelinaAbshire60 717,13 €
372TashaKunze64 904,36 €
373LulaCollier90 212,24 €
374DeannaStiedemann78 268,35 €
375ShelleyJohns87 217,90 €
376AlbertLittle81 290,85 €
377CarlosReichel98 138,19 €
378EbonySchiller68 048,74 €
379AndrewSchultz60 699,23 €
380EbonyStrosin62 514,96 €
381JanetHauck84 912,58 €
382DarrylBarton52 279,26 €
383LawrenceReilly69 375,45 €
384MerleAbbott68 595,59 €
385HugoO'Conner83 359,23 €
386JaniceRodriguez80 747,25 €
387SabrinaRohan87 173,33 €
388CarrieRutherford60 272,93 €
389DexterMayert76 548,50 €
390NeilCollier65 578,63 €
391KurtHudson69 301,70 €
392TraciBogisich66 958,98 €
393MargieWisoky73 741,48 €
394TonyaFahey67 174,49 €
395RobinCummings58 248,04 €
396EbonyDooley95 321,75 €
397KerryKiehn62 090,55 €
398EdmondZulauf71 307,08 €
399DarrelRenner97 531,20 €
400SamuelHintz56 505,23 €
401MiltonSpencer74 456,00 €
402RamonaKirlin94 970,73 €
403BerniceWiegand52 033,04 €
404EliasHowe97 651,27 €
405RobertoYundt62 652,13 €
406RosemarySchaefer68 839,52 €
407TerryHaley86 348,42 €
408SheriMitchell57 715,42 €
409PerryKing61 518,62 €
410BettyBotsford97 322,93 €
411LouisWeimann60 939,34 €
412MarshallHeidenreich88 487,45 €
413LoisKoch56 886,70 €
414AltonSchultz87 849,82 €
415BryantCorwin63 545,35 €
416ScottSchinner63 194,44 €
417KarlaKrajcik78 536,72 €
418AlfredoVandervort60 981,53 €
419WesleyCole63 627,14 €
420KristieHane72 576,80 €
421JonathanHaag67 395,58 €
422ShawnRatke71 156,76 €
423EddieMetz60 392,26 €
424FrancesBins50 298,35 €
425TonyPfeffer65 389,46 €
426YolandaSchuster99 616,45 €
427LanaHalvorson59 606,46 €
428AliciaBradtke96 629,57 €
429AmosBaumbach70 157,76 €
430FloydRaynor81 088,19 €
431JonJenkins57 446,39 €
432EliasKuphal75 968,29 €
433PedroPredovic79 226,86 €
434JessicaHeathcote61 143,89 €
435LindseyKovacek97 743,51 €
436TylerGreenfelder95 764,51 €
437MarionKautzer68 247,16 €
438JanieMarvin59 593,98 €
439NathanBarton98 958,20 €
440CeliaHagenes55 858,97 €
441DelbertLubowitz59 267,64 €
442KellyMedhurst63 280,53 €
443RalphLueilwitz50 350,17 €
444CaryYost96 934,71 €
445LonnieBashirian76 109,23 €
446ClaireBrown63 015,21 €
447GraceHarber76 656,79 €
448JanieMaggio75 100,48 €
449LoraWolf62 790,08 €
450ErmaLindgren50 992,38 €
451ErikCruickshank85 137,26 €
452WilburGrimes61 844,22 €
453ShawnaParisian85 909,02 €
454CindyGislason55 927,69 €
455JulioBeer84 416,72 €
456CaroleHintz67 774,26 €
457GrantZieme55 139,48 €
458BennyTurcotte77 752,90 €
459MartyPredovic88 693,35 €
460EloiseCartwright67 841,90 €
461BertMacejkovic70 948,62 €
462LuisHansen57 917,28 €
463NoahSchinner70 205,07 €
464DonSwift83 846,08 €
465AlyssaPollich92 025,52 €
466CraigWilderman74 374,66 €
467AndresJenkins68 743,52 €
468GuyLesch59 731,59 €
469EugeneGoldner88 579,25 €
470LindsayMarks56 124,81 €
471TanyaHintz70 772,36 €
472MaxCummerata91 507,36 €
473PatsyChristiansen86 900,25 €
474RuthBruen93 391,25 €
475TomCole60 015,88 €
476CharleneGoyette75 040,63 €
477TedMann77 324,64 €
478GeorgeFerry86 090,05 €
479HoraceStark75 461,10 €
480SandyKozey61 485,46 €
481RichardHodkiewicz81 577,34 €
482AngelinaRutherford85 489,63 €
483AudreyChristiansen99 398,50 €
484EllaLittel65 535,18 €
485GinaBruen50 564,33 €
486CarolynNolan69 736,17 €
487BerniceLabadie72 465,56 €
488KrystalPurdy79 207,99 €
489TommieBrakus98 868,50 €
490BernardWehner93 934,24 €
491CaseyTerry69 148,67 €
492ConnieHansen63 577,44 €
493LoraStrosin53 705,29 €
494GrantKlocko87 161,39 €
495TerranceMonahan93 972,86 €
496TroyRitchie67 831,12 €
497DeannaKlocko69 116,80 €
498SusieCasper53 448,48 €
499DeannaGreenholt62 398,17 €
0 - 0 of 0 items
0 items
ODataQuery
@using Blazorise.DataGrid.Extensions;

<DataGrid TItem="Employee"
          Data="@employeeList"
          ReadData="@OnReadData"
          TotalItems="@totalEmployees"
          PageSize="10"
          ShowPager
          Responsive>
    <DataGridCommandColumn />
    <DataGridColumn Field="@nameof(Employee.Id)" Caption="#" Sortable="false" />
    <DataGridColumn Field="@nameof(Employee.FirstName)" Caption="First Name" Editable />
    <DataGridColumn Field="@nameof(Employee.LastName)" Caption="Last Name" Editable />
    <DataGridColumn Field="@nameof(Employee.Salary)" Caption="Salary" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" Editable>
        <EditTemplate>
            <NumericEdit TValue="decimal" Value="@((decimal)context.CellValue)" ValueChanged="@( v => context.CellValue = v)" />
        </EditTemplate>
    </DataGridColumn>
</DataGrid>

<Row>
    <Column>
        <Card>
            <CardHeader>
                ODataQuery
            </CardHeader>
            <CardBody>
                <Code>@oDataQuery</Code>
            </CardBody>
        </Card>
    </Column>
</Row>
@code {
    [Inject]
    public EmployeeData EmployeeData { get; set; }
    private List<Employee> employeeList;
    private string oDataQuery;
    protected override async Task OnInitializedAsync()
    {
        employeeList = await EmployeeData.GetDataAsync();
        await base.OnInitializedAsync();
    }

    private int totalEmployees;

    private async Task OnReadData( DataGridReadDataEventArgs<Employee> e )
    {
        oDataQuery = e.ToODataString( "https://services.odata.org/V4/Northwind/Northwind.svc/Employees" );

        if ( !e.CancellationToken.IsCancellationRequested )
        {
            List<Employee> response = null;

            // this can be call to anything, in this case we're calling a fictional api
            //var response = await Http.GetJsonAsync<Employee[]>( $"some-api/employees?page={e.Page}&pageSize={e.PageSize}" );
            if ( e.ReadDataMode is DataGridReadDataMode.Virtualize )
                response = ( await EmployeeData.GetDataAsync() ).Skip( e.VirtualizeOffset ).Take( e.VirtualizeCount ).ToList();
            else if ( e.ReadDataMode is DataGridReadDataMode.Paging )
                response = ( await EmployeeData.GetDataAsync() ).Skip( ( e.Page - 1 ) * e.PageSize ).Take( e.PageSize ).ToList();
            else
                throw new Exception( "Unhandled ReadDataMode" );

            if ( !e.CancellationToken.IsCancellationRequested )
            {
                totalEmployees = ( await EmployeeData.GetDataAsync() ).Count;
                employeeList = new List<Employee>( response ); // an actual data for the current page
            }
        }
    }
}

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

On this page