We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Multiselect persistence across browser session, local storage not loading


I have a multiselect dropdown that saves the selected values to local storage.

await Javascript.InvokeVoidAsync("localStorage.setItem", "gamesFilter", values);

then when the user refreshes the page, in the on Initialize method we run localStorage.getItem and set them to the bind-Value of the multi select. However the values are not being set until I click a button to update the state. How do I get the initial values to load from local storage without a manual state have changed update.

I have attached a sample

Attachment: BlazorWASMApp_3_a1812d8.zip

4 Replies

PA Pavel January 17, 2023 04:19 PM UTC

Any updates on this?

UD UdhayaKumar Duraisamy Syncfusion Team January 18, 2023 04:13 PM UTC

Hi Pavel,

Thank you for reaching out to us regarding your requirement. We understand that you have a specific need and we are currently in the process of validating it. We assure you that we will provide you with more details and an update within the next two business days, which is January 20th, 2023.

Please let us know if there is anything else we can assist you with in the meantime.


Udhaya Kumar D

PA Pavel January 23, 2023 04:53 PM UTC

hello any update?

NA Nivetha Anandan Syncfusion Team January 25, 2023 09:21 AM UTC

The ID property is required to use the EnablePersistence property in the Syncfusion Blazor MultiSelect component. The ID property is used to uniquely identify the component on the page, which allows the component to persist its selected items and other settings across page refreshes or navigation.

Without setting the ID property, the EnablePersistence feature will not work and the component will not be able to persist its selected items and other settings.


        <SfMultiSelect ID="multiSelect" @ref="@GamesRef" TItem="Games" Placeholder="Favorite Sports" EnabledChangeOnBlur="false" DataSource="@LocalData" @bind-Value="@GamesBindValue" EnablePersistence="true" TValue="string[]" PopupHeight="500px" PopoutWidth="200px" Width="200px" AllowFiltering="false" Mode="VisualMode.CheckBox">

            <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>

            <MultiSelectEvents TItem="Games" TValue="string[]" ValueChange="@ValueChangeHandler" OnValueSelect="@OnValueSelect" OnValueRemove="@OnValueRemoveHandler" Cleared="@ClearedHandler" Blur="BlurHandler"></MultiSelectEvents>