multiselect drop down initial values

[Pavel]

Hello,

I would like to set initial values for the multiselect drop down.

I am setting the values like this:

protected override void OnInitialized()
{
    MultiVal= new string[] { "Denmark","Finland" };
}

However values are not being set and persistence is also not working.

I have attached a code sample.

Thank you

Attachment: initialValues_abec0940.zip

[Sureshkumar P]

Hi Pavel,

We suggest you use the nullable CountiresEnum instead of CountiresEnum in the TItem value and use the List<CountiresEnum?> as TValue instead of string[] to resolve the issue.

Find the modified code example here:

<SfMultiSelect @ref="@EuMultiSelectRef" ID="EuMultiSelect" TValue="List<CountiresEnum?>" TItem="CountiresEnum?" Placeholder="EU" @bind-Value="@MultiVal" DataSource="@EuropeanCountriesList" ShowClearButton="true" Width="300px" EnablePersistence="true" Mode="VisualMode.CheckBox">

</SfMultiSelect>

 

@code {

    public List<CountiresEnum?> MultiVal { get; set; }

 

    public List<CountiresEnum?> EuropeanCountriesList { get; set; } = new List<CountiresEnum?>()

    {

        CountiresEnum.Australia,

        CountiresEnum.Finland,

        CountiresEnum.Denmark

    };

 

    public SfMultiSelect<List<CountiresEnum?>, CountiresEnum?> EuMultiSelectRef { get; set; } = new();

 

    protected override void OnInitialized()

    {

        MultiVal = new List<CountiresEnum?> { CountiresEnum.Denmark, CountiresEnum.Finland };

    }

 

}

 

Find the modified sample in the attachment:

Note: If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Sureshkumar P

Attachment: SyncfusionBlazorApp1_388ae33.zip

[Pavel]

Doesn't seem to work with Item Templete , the application crashes and throws null exception

<MultiSelectTemplates TItem=@CountiresEnum>

     <ItemTemplate>

         <span>@context</span>

         <span class="float-right">5</span>

     </ItemTemplate>

 </MultiSelectTemplates>

[Sureshkumar P]

Hi Pavel,

We suggest you change the template code as below to resolve the issue.

<SfMultiSelect @ref="@EuMultiSelectRef" ID="EuMultiSelect" TValue="List<CountiresEnum?>" TItem="CountiresEnum?" Placeholder="EU" @bind-Value="@MultiVal" DataSource="@EuropeanCountriesList" ShowClearButton="true" Width="300px" EnablePersistence="true" Mode="VisualMode.CheckBox">

    <MultiSelectTemplates TItem=CountiresEnum?>

 

        <ItemTemplate>

 

            <span>@context</span>

 

            <span class="float-right">5</span>

 

        </ItemTemplate>

 

    </MultiSelectTemplates>

</SfMultiSelect>

 

@code {

    public List<CountiresEnum?> MultiVal { get; set; }

 

    public List<CountiresEnum?> EuropeanCountriesList { get; set; } = new List<CountiresEnum?>()

    {

        CountiresEnum.Australia,

        CountiresEnum.Finland,

        CountiresEnum.Denmark

    };

 

    public SfMultiSelect<List<CountiresEnum?>, CountiresEnum?> EuMultiSelectRef { get; set; } = new();

 

    protected override void OnInitialized()

    {

        MultiVal = new List<CountiresEnum?> { CountiresEnum.Denmark, CountiresEnum.Finland };

    }

 

}

 

Find the output screenshot here:

Note: If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Sureshkumar P

[Pavel]

The solution worked but why?

Why did using nullable CountiresEnum fix the issues?

I'm not seeing this in any documentation

[Sureshkumar P]

Hi Pavel,

The nullable data source may either contain a valid value or they may not, in our scenario they are null. Non-nullable data must always contain a value and cannot be null (in this case the first data value act as the default preselect value to the component).

In our scenario, we have used a nullable data type to load the passed data to the component otherwise all cases the default value (first value will be displayed) updated to the component.

Regards,

Sureshkumar P