1+ @page " /explicit-serialization"
2+
3+ @using StateInProtectedBrowserStorage .Models
4+ @using StateInProtectedBrowserStorage .Services
5+ @inject GridDataService DataService
6+ @inject IJSRuntime JsInterop
7+
8+ @using System .Text .Json
9+ @using Microsoft .AspNetCore .Components .Server .ProtectedBrowserStorage
10+ @inject ProtectedLocalStorage _MsBrowserStorage
11+
12+ Change something in the grid (like sort, filter, select, page, resize columns, etc.), then reload the page to see the grid state fetched from the browser local storage.
13+ <br />
14+
15+ <TelerikButton OnClick =" @ReloadPage" TelerikButton >
16+ <TelerikButton OnClick =" @ResetState" TelerikButton >
17+
18+ <TelerikGrid Data =" @GridData" Height =" 500px" @ref =" @Grid"
19+ Groupable =" true"
20+ Pageable =" true"
21+ Sortable =" true"
22+ FilterMode =" @GridFilterMode.FilterRow"
23+ Reorderable =" true"
24+ Resizable =" true"
25+ SelectionMode =" GridSelectionMode.Multiple" @bind-SelectedItems =" @SelectedItems"
26+ OnUpdate =@UpdateItem OnDelete =@DeleteItem OnCreate =@CreateItem EditMode =" @GridEditMode.Inline"
27+ OnStateInit =" @((GridStateEventArgs<SampleData> args) => OnStateInitHandler(args))"
28+ OnStateChanged =" @((GridStateEventArgs<SampleData> args) => OnStateChangedHandler(args))"
29+ <GridColumns >
30+ <GridColumn Field =" @(nameof(SampleData.Id))" Editable =" false"
31+ <GridColumn Field =" @(nameof(SampleData.Name))" Title =" Employee Name"
32+ <GridColumn Field =" @(nameof(SampleData.Team))" Title =" Team"
33+ <GridCommandColumn >
34+ <GridCommandButton Command =" Edit" Icon =" edit" GridCommandButton >
35+ <GridCommandButton Command =" Delete" Icon =" delete" GridCommandButton >
36+ <GridCommandButton Command =" Save" Icon =" save" ShowInEdit =" true" GridCommandButton >
37+ <GridCommandButton Command =" Cancel" Icon =" cancel" ShowInEdit =" true" GridCommandButton >
38+ </GridCommandColumn >
39+ </GridColumns >
40+ <GridToolBar >
41+ <GridCommandButton Command =" Add" Icon =" add" GridCommandButton >
42+ </GridToolBar >
43+ </TelerikGrid >
44+
45+ @if (SelectedItems != null )
46+ {
47+ <ul >
48+ @foreach ( SampleData employee in SelectedItems )
49+ {
50+ <li >
51+ @employee.Id
52+ </li >
53+ }
54+ </ul >
55+ }
56+
57+ @code {
58+ List <SampleData > GridData { get ; set ; }
59+ IEnumerable <SampleData > SelectedItems { get ; set ; } = Enumerable .Empty <SampleData >();
60+
61+
62+
63+ // Load and Save the state through the grid events
64+ string UniqueStorageKey = " SampleGridStateStorageKeyThatShouldBeUnique"
65+ TelerikGrid <SampleData > Grid { get ; set ; }
66+
67+ async Task OnStateInitHandler (GridStateEventArgs < SampleData > args )
68+ {
69+ try
70+ {
71+ ProtectedBrowserStorageResult <string > storageData = await _MsBrowserStorage .GetAsync <string >(UniqueStorageKey );
72+ if (storageData .Success && ! string .IsNullOrEmpty (storageData .Value ))
73+ {
74+ args .GridState = JsonSerializer .Deserialize <GridState <SampleData >>(storageData .Value );
75+ }
76+
77+ }
78+ catch (InvalidOperationException e )
79+ {
80+ // the JS Interop for the MS local storage cannot be used during pre-rendering
81+ // so the code above will throw. Once the app initializes, it will work fine
82+ // Read mor in the official documentation, as there are different ways to handle this
83+ // https://docs.microsoft.com/en-us/aspnet/core/blazor/state-management?view=aspnetcore-5.0&pivots=server
84+ }
85+ }
86+
87+ async void OnStateChangedHandler (GridStateEventArgs < SampleData > args )
88+ {
89+ await _MsBrowserStorage .SetAsync (
90+ UniqueStorageKey ,
91+ JsonSerializer .Serialize (args .GridState )
92+ );
93+ }
94+
95+ async Task ResetState ()
96+ {
97+ // clean up the storage
98+ await _MsBrowserStorage .DeleteAsync (UniqueStorageKey );
99+
100+ await Grid .SetState (null ); // pass null to reset the state
101+ }
102+
103+ void ReloadPage ()
104+ {
105+ JsInterop .InvokeVoidAsync (" window.location.reload"
106+ }
107+
108+
109+
110+
111+ // Sample CRUD operations
112+
113+ async Task UpdateItem (GridCommandEventArgs args )
114+ {
115+ SampleData item = (SampleData )args .Item ;
116+
117+ // perform actual data source operations here through your service
118+ await DataService .Update (item );
119+
120+ // update the local view-model data with the service data
121+ await GetGridData ();
122+
123+ Console .WriteLine (" Update event is fired."
124+ }
125+
126+ async Task DeleteItem (GridCommandEventArgs args )
127+ {
128+ SampleData item = (SampleData )args .Item ;
129+
130+ // perform actual data source operation here through your service
131+ await DataService .Delete (item );
132+
133+ // update the local view-model data with the service data
134+ await GetGridData ();
135+
136+ Console .WriteLine (" Delete event is fired."
137+ }
138+
139+ async Task CreateItem (GridCommandEventArgs args )
140+ {
141+ SampleData item = (SampleData )args .Item ;
142+
143+ // perform actual data source operation here through your service
144+ await DataService .Create (item );
145+
146+ // update the local view-model data with the service data
147+ await GetGridData ();
148+
149+ Console .WriteLine (" Create event is fired."
150+ }
151+
152+ async Task GetGridData ()
153+ {
154+ GridData = await DataService .Read ();
155+ }
156+
157+ protected override async Task OnInitializedAsync ()
158+ {
159+ await GetGridData ();
160+ }
161+ }
0 commit comments