New to Telerik UI for Blazor? Download Free 30-day trial
TaskBoard - State
- EXAMPLE
- VIEW SOURCE
- Change Theme
meridian
Manage State
Create landing page for the upcoming campaign
Draft and schedule the monthly newsletter
Review advertising performance metrics
Update on-page SEO across the product blog
Analyze conversion rates across all funnel stages
Synthesize feedback from recent user interviews
Review the checkout and onboarding experience
Publish the updated content plan for Q3
- State.razor
Description
The Telerik UI for Blazor TaskBoard exposes a state API that enables applications to capture and restore the board layout programmatically — including column display order and card positions within columns.
This demo showcases the State feature using GetState() and SetStateAsync(). Clicking Save State captures the current column order and card positions and persists them to browser localStorage. Clicking Reload Page navigates away and back, after which the board automatically restores the saved state on the first render. Load State restores a previously saved state without reloading, while Reset State clears the stored entry and reloads the page to return the board to its default configuration.
The TaskBoardState<TColumn> object returned by GetState() contains a list of TaskBoardColumnState entries (each with a column status key and display index) and a list of TaskBoardCardState entries (each with a card ID, column status, and position index). SetStateAsync() uses the status key to match saved column entries to live data and the card ID to match card entries, restoring display order without replacing the underlying data.
For cross-session persistence, serialize the state object to JSON before saving and deserialize it when loading. The column and card data must always be provided through ColumnData and CardData — state stores ordering information only.