|
11 | 11 |
|
12 | 12 | * With Server-side Blazor, the file may become larger than the default SignalR connection limit, and this can disconnect the client and result in an error. Generally, this requires quite a lot of data to happen, but you may need to increase the size limit of the connection in the `ConfigureServices` method of your `Startup.cs` file, for example: |
13 | 13 |
|
14 | | - **C#** |
15 | | - |
16 | | - services.AddServerSideBlazor().AddHubOptions(o => |
17 | | - { |
18 | | - o.MaximumReceiveMessageSize = 1024 * 1024; // 1MB |
19 | | - }); |
| 14 | +````C# |
| 15 | +services.AddServerSideBlazor().AddHubOptions(o => |
| 16 | +{ |
| 17 | + o.MaximumReceiveMessageSize = 1024 * 1024; // 1MB |
| 18 | +}); |
| 19 | +```` |
20 | 20 |
|
21 | 21 | * With Client-side Blazor (WebAssembly), all the code runs in the browser and, at the time of writing, is considerably slower than server-side Blazor, and it only has one actual thread. This means that while the file is being generated, the UI will be unresponsive, so you may want to show a loading sign to the user through the `OnClick` handler of the command button, something like: |
22 | 22 |
|
23 | | - **Component** |
24 | | - |
25 | | - @* Exporting a lot of rows can be slow in a WebAssembly app more so than in a server-side app, and it blocks the UI *@ |
| 23 | +````RAZOR Component |
| 24 | +@* Exporting a lot of rows can be slow in a WebAssembly app more so than in a server-side app, and it blocks the UI *@ |
26 | 25 | |
27 | | - <TelerikGrid Data="@GridData" AutoGenerateColumns="true" Pageable="true"> |
28 | | - <GridToolBarTemplate> |
29 | | - <GridCommandButton OnClick="@ShowLoadingSign" Command="ExcelExport" Icon="@SvgIcon.FileExcel">Export to Excel</GridCommandButton> |
30 | | - <GridCommandButton OnClick="@ShowLoadingSign" Command="CsvExport" Icon="@SvgIcon.FileCsv">Export to CSV</GridCommandButton> |
31 | | - </GridToolBarTemplate> |
32 | | - <GridExport> |
33 | | - <GridExcelExport AllPages="true" FileName="telerik-grid-export" /> |
34 | | - <GridCsvExport AllPages="true" FileName="telerik-grid-export" /> |
35 | | - </GridExport> |
36 | | - </TelerikGrid> |
| 26 | +<TelerikGrid Data="@GridData" AutoGenerateColumns="true" Pageable="true"> |
| 27 | + <GridToolBarTemplate> |
| 28 | + <GridCommandButton OnClick="@ShowLoadingSign" Command="ExcelExport" Icon="@SvgIcon.FileExcel">Export to Excel</GridCommandButton> |
| 29 | + <GridCommandButton OnClick="@ShowLoadingSign" Command="CsvExport" Icon="@SvgIcon.FileCsv">Export to CSV</GridCommandButton> |
| 30 | + </GridToolBarTemplate> |
| 31 | + <GridExport> |
| 32 | + <GridExcelExport AllPages="true" FileName="telerik-grid-export" /> |
| 33 | + <GridCsvExport AllPages="true" FileName="telerik-grid-export" /> |
| 34 | + </GridExport> |
| 35 | +</TelerikGrid> |
37 | 36 | |
38 | | - <TelerikWindow Visible="@isExporting" Modal="true"> |
39 | | - <WindowTitle>Please wait...</WindowTitle> |
40 | | - <WindowContent>We are exporting your data, your file will download shortly.</WindowContent> |
41 | | - </TelerikWindow> |
| 37 | +<TelerikWindow Visible="@isExporting" Modal="true"> |
| 38 | + <WindowTitle>Please wait...</WindowTitle> |
| 39 | + <WindowContent>We are exporting your data, your file will download shortly.</WindowContent> |
| 40 | +</TelerikWindow> |
42 | 41 | |
43 | | - @code { |
44 | | - bool isExporting { get; set; } |
| 42 | +@code { |
| 43 | + bool isExporting { get; set; } |
45 | 44 | |
46 | | - async Task ShowLoadingSign() |
47 | | - { |
48 | | - isExporting = true; |
49 | | - StateHasChanged(); |
50 | | - // This won't work for server-side Blazor, the UI will render immediately after the delay and the loading sign will only flicker |
51 | | - await Task.Delay(50); |
52 | | - isExporting = false; |
53 | | - } |
| 45 | + async Task ShowLoadingSign() |
| 46 | + { |
| 47 | + isExporting = true; |
| 48 | + StateHasChanged(); |
| 49 | + // This won't work for server-side Blazor, the UI will render immediately after the delay and the loading sign will only flicker |
| 50 | + await Task.Delay(50); |
| 51 | + isExporting = false; |
| 52 | + } |
54 | 53 | |
55 | | - List<SampleData> GridData { get; set; } |
| 54 | + List<SampleData> GridData { get; set; } |
56 | 55 | |
57 | | - protected override void OnInitialized() |
58 | | - { |
59 | | - GridData = Enumerable.Range(1, 1000).Select(x => new SampleData |
60 | | - { |
61 | | - ProductId = x, |
62 | | - ProductName = $"Product {x}", |
63 | | - UnitsInStock = x * 2, |
64 | | - Price = 3.14159m * x, |
65 | | - Discontinued = x % 4 == 0, |
66 | | - FirstReleaseDate = DateTime.Now.AddDays(-x) |
67 | | - }).ToList(); |
68 | | - } |
| 56 | + protected override void OnInitialized() |
| 57 | + { |
| 58 | + GridData = Enumerable.Range(1, 1000).Select(x => new SampleData |
| 59 | + { |
| 60 | + ProductId = x, |
| 61 | + ProductName = $"Product {x}", |
| 62 | + UnitsInStock = x * 2, |
| 63 | + Price = 3.14159m * x, |
| 64 | + Discontinued = x % 4 == 0, |
| 65 | + FirstReleaseDate = DateTime.Now.AddDays(-x) |
| 66 | + }).ToList(); |
| 67 | + } |
69 | 68 | |
70 | | - public class SampleData |
71 | | - { |
72 | | - public int ProductId { get; set; } |
73 | | - public string ProductName { get; set; } |
74 | | - public int UnitsInStock { get; set; } |
75 | | - public decimal Price { get; set; } |
76 | | - public bool Discontinued { get; set; } |
77 | | - public DateTime FirstReleaseDate { get; set; } |
78 | | - } |
79 | | - } |
| 69 | + public class SampleData |
| 70 | + { |
| 71 | + public int ProductId { get; set; } |
| 72 | + public string ProductName { get; set; } |
| 73 | + public int UnitsInStock { get; set; } |
| 74 | + public decimal Price { get; set; } |
| 75 | + public bool Discontinued { get; set; } |
| 76 | + public DateTime FirstReleaseDate { get; set; } |
| 77 | + } |
| 78 | +} |
| 79 | +```` |
80 | 80 | #end |
0 commit comments