Multiselect persistence across browser session, local storage not loading

[Pavel]

Hello,

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

[Pavel]

Any updates on this?

[UdhayaKumar Duraisamy]

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.

Regards,

Udhaya Kumar D

[Pavel]

hello any update?

[Nivetha Anandan]

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.

    <div>

        <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>

        </SfMultiSelect>

    </div>

It is important to note that the ID should be unique for each MultiSelect component on the same page, otherwise the persistence feature will not work correctly.