-
-
Notifications
You must be signed in to change notification settings - Fork 532
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* DataGrid State | Ongoing * Demo | StateManagement page | Add docs & Item states * remove leftover from testing * State | Get sort & filter info | Reset Sort & Filter if no info is provided * Docs | Add StateManagement page * DataGrid docs | API methods for LoadState And GetState * Release notes for DataGrid State Management * ResetFiltering | Columns NullEmpty Check * SetNewState | SetEditState * Move States to their own files * Using directives remove lines * Formating and comments --------- Co-authored-by: Mladen Macanovic <[email protected]>
- Loading branch information
1 parent
741eee7
commit 7b705df
Showing
18 changed files
with
899 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
126 changes: 126 additions & 0 deletions
126
Demos/Blazorise.Demo/Pages/Tests/DataGrid/StateManagementPage.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| @page "/tests/datagrid/state" | ||
|
|
||
| <Row> | ||
| <Column> | ||
| <Card Margin="Margin.Is4.OnY"> | ||
| <CardHeader> | ||
| <CardTitle>Datagrid: State Management</CardTitle> | ||
| </CardHeader> | ||
| <CardBody> | ||
| <Paragraph> | ||
| Our DataGrid allows you to save and load state. | ||
| You can use the <code>LoadState</code> and <code>GetState</code> methods to load and get the DataGrid state. | ||
| </Paragraph> | ||
| <Paragraph> | ||
| In the following example, | ||
| <UnorderedList> | ||
| <UnorderedListItem>we are using the <code>LoadState</code> method to load the DataGrid state from the LocalStorage if available.</UnorderedListItem> | ||
| <UnorderedListItem>We are using the <code>GetState</code> method to save the DataGrid state to the LocalStorage in order to load at a later date.</UnorderedListItem> | ||
| <UnorderedListItem>The page checks the LocalStorage on first render and loads the saved state if available.</UnorderedListItem> | ||
| </UnorderedList> | ||
| </Paragraph> | ||
| <Paragraph> | ||
| <Button Color="Color.Primary" Clicked="LoadState">Load State</Button> | ||
| <Button Color="Color.Success" Clicked="SaveState">Save State</Button> | ||
| <Button Color="Color.Light" Clicked="ResetState">Reset State</Button> | ||
| </Paragraph> | ||
| </CardBody> | ||
| <CardBody> | ||
| <DataGrid @ref="dataGridRef" | ||
| TItem="Employee" | ||
| Data="inMemoryData" | ||
| Responsive | ||
| Editable | ||
| Filterable | ||
| ShowPager | ||
| ShowPageSizes> | ||
| <DataGridColumns> | ||
| <DataGridColumn TextAlignment="TextAlignment.Center" TItem="Employee" Field="@nameof( Employee.Id )" Caption="#" Width="60px" /> | ||
| <DataGridColumn TItem="Employee" Field="@nameof( Employee.FirstName )" Caption="First Name"> | ||
| </DataGridColumn> | ||
| <DataGridColumn TItem="Employee" Field="@nameof( Employee.LastName )" Caption="Last Name" /> | ||
| <DataGridColumn TItem="Employee" Field="@nameof( Employee.Email )" Caption="Email" /> | ||
| <DataGridColumn TItem="Employee" Field="@nameof( Employee.City )" Caption="City"> | ||
| <CaptionTemplate> | ||
| <Icon Name="IconName.City" /> @context.Caption | ||
| </CaptionTemplate> | ||
| </DataGridColumn> | ||
| <DataGridColumn TItem="Employee" Field="@nameof( Employee.Zip )" Caption="Zip"> | ||
| </DataGridColumn> | ||
| <DataGridDateColumn TItem="Employee" Field="@nameof( Employee.DateOfBirth )" DisplayFormat="{0:dd.MM.yyyy}" Caption="Date Of Birth" Editable /> | ||
| <DataGridNumericColumn TItem="Employee" Field="@nameof( Employee.Childrens )" Caption="Childrens" ReverseSorting="true" Editable Filterable="false" /> | ||
| <DataGridSelectColumn TItem="Employee" Field="@nameof( Employee.Gender )" Caption="Gender" Editable Data="EmployeeData.Genders" ValueField="(x) => ((Gender)x).Code" TextField="(x) => ((Gender)x).Description" /> | ||
| <DataGridColumn TItem="Employee" Field="@nameof( Employee.Salary )" Caption="Salary" Editable Width="140px" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" TextAlignment="TextAlignment.End"> | ||
| </DataGridColumn> | ||
| <DataGridCheckColumn TItem="Employee" Field="@nameof(Employee.IsActive)" Caption="Active" Editable Filterable="false"> | ||
| <DisplayTemplate> | ||
| <Check TValue="bool" Checked="context.IsActive" Disabled ReadOnly /> | ||
| </DisplayTemplate> | ||
| </DataGridCheckColumn> | ||
| </DataGridColumns> | ||
| </DataGrid> | ||
| </CardBody> | ||
| </Card> | ||
| </Column> | ||
| </Row> | ||
|
|
||
| @code { | ||
| [Inject] Blazored.LocalStorage.ILocalStorageService LocalStorage { get; set; } | ||
| [Inject] EmployeeData EmployeeData { get; set; } | ||
|
|
||
| private const string STORAGE_KEY = "__DATAGRID_STATE__"; | ||
| private DataGrid<Employee> dataGridRef; | ||
| private IEnumerable<Employee> inMemoryData; | ||
|
|
||
| protected override async Task OnInitializedAsync() | ||
| { | ||
| inMemoryData = ( await EmployeeData.GetDataAsync().ConfigureAwait( false ) ).Take( 25 ); | ||
| await base.OnInitializedAsync(); | ||
| } | ||
|
|
||
| protected async override Task OnAfterRenderAsync( bool firstRender ) | ||
| { | ||
| if ( firstRender ) | ||
| { | ||
| await LoadState(); | ||
| } | ||
| await base.OnAfterRenderAsync( firstRender ); | ||
| } | ||
|
|
||
| private async Task ResetState() | ||
| { | ||
| await LocalStorage.RemoveItemAsync( STORAGE_KEY ); | ||
| var state = new DataGridState<Employee>() | ||
| { | ||
| CurrentPage = 1, | ||
| PageSize = 10, | ||
| }; | ||
| await dataGridRef.LoadState( state ); | ||
| } | ||
|
|
||
| private async Task LoadState() | ||
| { | ||
| var stateFromLocalStorage = await LocalStorage.GetItemAsync<DataGridState<Employee>>( STORAGE_KEY ); | ||
|
|
||
| if ( stateFromLocalStorage is not null ) | ||
| { | ||
| //It is of note that we must make sure the reference is contained in the DataGrid Data collection. | ||
| if ( stateFromLocalStorage.SelectedRow is not null ) | ||
| { | ||
| stateFromLocalStorage.SelectedRow = inMemoryData.FirstOrDefault( x => x.Id == stateFromLocalStorage.SelectedRow.Id ); | ||
| } | ||
| if ( stateFromLocalStorage.EditItem is not null ) | ||
| { | ||
| stateFromLocalStorage.EditItem = inMemoryData.FirstOrDefault( x => x.Id == stateFromLocalStorage.EditItem.Id ); | ||
| } | ||
| await dataGridRef.LoadState( stateFromLocalStorage ); | ||
| return; | ||
| } | ||
| } | ||
|
|
||
| private async Task SaveState() | ||
| { | ||
| var state = await dataGridRef.GetState(); | ||
| await LocalStorage.SetItemAsync( STORAGE_KEY, state ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.