GridPersistentLayoutColumn Class
Contains information about layout settings for columns.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v22.1.dll
NuGet Package: DevExpress.Blazor
Declaration
public class GridPersistentLayoutColumn :
IEquatable<GridPersistentLayoutColumn>
Remarks
The Grid allows you to save and restore its layout settings that a user can change in the UI. A GridPersistentLayout object stores layout settings at the Grid level. The GridPersistentLayout.Columns collection stores layout settings for columns. Each collection item (a GridPersistentLayoutColumn
object) includes the following data:
Saved information | Grid column parameter | GridPersistentLayoutColumn’s property |
---|---|---|
Column type | A column type defined in the markup: data, command, or selection. | LayoutColumn.ColumnType |
A data field name | DxGridColumn.FieldName | LayoutColumn.FieldName |
Group index[1] | DxGridColumn.GroupIndex | LayoutColumn.GroupIndex |
Sort index | DxGridColumn.SortIndex | LayoutColumn.SortIndex |
Sort direction | DxGridColumn.SortOrder | LayoutColumn.SortOrder |
Position | DxGridColumn.VisibleIndex | LayoutColumn.VisibleIndex |
Visibility | DxGridColumn.Visible | LayoutColumn.Visible |
Width | DxGridColumn.Width | LayoutColumn.Width |
Handle the following events to save and restore the Grid layout automatically:
- LayoutAutoSaving – Fires each time the grid’s layout changes and allows you to save the layout.
- LayoutAutoLoading – Fires once the grid component is initialized and allows you to restore the saved layout.
To save and restore the Grid layout on demand (for example, on a button click), call the following methods:
- SaveLayout() – Saves information about a Grid’s layout.
- LoadLayout(GridPersistentLayout) – Loads a layout and applies it to the Grid.
The code below excludes a column’s GroupIndex parameter from the list of saved column layout settings.
@using System.Text.Json
@inject NwindDataService NwindDataService
@inject IJSRuntime JSRuntime
@if(PreRendered) {
<DxGrid @ref="Grid" Data="@GridData" AutoExpandAllGroupRows="true"
ColumnResizeMode="GridColumnResizeMode.NextColumn"
ShowGroupPanel="true" ShowFilterRow="true"
PageSizeSelectorVisible="true" PageSizeSelectorAllRowsItemVisible="true"
LayoutAutoLoading="Grid_LayoutAutoLoading"
LayoutAutoSaving="Grid_LayoutAutoSaving">
<Columns>
<DxGridDataColumn FieldName="Country" GroupIndex="0" />
<DxGridDataColumn FieldName="City" GroupIndex="1" />
<DxGridDataColumn FieldName="CompanyName" />
<DxGridDataColumn FieldName="Address" />
<DxGridDataColumn FieldName="Phone" />
<DxGridDataColumn FieldName="ContactName" />
</Columns>
</DxGrid>
} else {
<em>Loading...</em>
}
@code {
const string LocalStorageKey = "Grid-LayoutPersistence-Data";
bool PreRendered { get; set; }
IGrid Grid { get; set; }
object GridData { get; set; }
protected override async Task OnInitializedAsync() {
GridData = await NwindDataService.GetCustomersAsync();
}
protected override void OnAfterRender(bool firstRender) {
if(firstRender) {
PreRendered = true;
StateHasChanged();
}
}
async Task Grid_LayoutAutoLoading(GridPersistentLayoutEventArgs e) {
e.Layout = await LoadLayoutFromLocalStorageAsync();
}
async Task Grid_LayoutAutoSaving(GridPersistentLayoutEventArgs e) {
var layout = e.Layout with {
Columns = new GridPersistentLayoutCollection<GridPersistentLayoutColumn>(
e.Layout.Columns.Select(i => i with { GroupIndex = null })
)
};
await SaveLayoutToLocalStorageAsync(layout);
}
async Task<GridPersistentLayout> LoadLayoutFromLocalStorageAsync() {
try {
var json = await JSRuntime.InvokeAsync<string>("localStorage.getItem", LocalStorageKey);
return JsonSerializer.Deserialize<GridPersistentLayout>(json);
} catch {
// Mute exceptions
return null;
}
}
async Task SaveLayoutToLocalStorageAsync(GridPersistentLayout layout) {
try {
var json = JsonSerializer.Serialize(layout);
await JSRuntime.InvokeVoidAsync("localStorage.setItem", LocalStorageKey, json);
} catch {
// Mute exceptions
}
}
}