Select mutliple default values on parameters set

[Stefan]

On loading a list of endorsements from the database, I want to have the list of endorsements, that a driver already has added to their record on the database, selected within the multiselect component. How do I bind this list of values to multiselect so the driver's endorsements are selected automatically?

<SfMultiSelect TValue="string" TItem="Endorsement" @ref="EndorsementDD" Width="100%" DataSource="@_endorsements" Placeholder="@defaultValue" Mode="@VisualMode.CheckBox">
    <MultiSelectTemplates TItem="Endorsement">
        <ItemTemplate>
            <span><span class="code">@((context as Endorsement).Code)</span><span class="name">@((context as Endorsement).Name)</span></span>
        </ItemTemplate>
    </MultiSelectTemplates>
    <MultiSelectFieldSettings Text="Name" Value="Name"></MultiSelectFieldSettings>
    <MultiSelectEvents TValue="string" TItem="Endorsement" OnValueSelect="OnSelect" ValueRemoved="OnRemove"></MultiSelectEvents>
</SfMultiSelect>
@code {
    SfMultiSelect<string, Endorsement> EndorsementDD;
    private List<Endorsement> _endorsements = new List<Endorsement>();
    [Parameter]
    public long DriverId { get; set; }
    [Parameter]
    public EventCallback<Endorsement> SelectEndorsement { get; set; }
    [Parameter]
    public EventCallback<Endorsement> RemoveEndorsement { get; set; }
    public string defaultValue = "Select endorsement(s)";


    //Loads endorsements from Database
    public async Task PopulateEndorsements()
    {
        _endorsements =( await SearchService.GetRecords()).ToList();
    }


    //Pushes the endorsement to the parent
    public async void OnSelect(SelectEventArgs<Endorsement> args)
    {
        await SelectEndorsement.InvokeAsync(args.ItemData);
    }


    //Removes endorsement from list of endorsements in parent
    public async void OnRemove(RemoveEventArgs<Endorsement> args)
    {
        await RemoveEndorsement.InvokeAsync(args.ItemData);
    }    

[Deepak Ramakrishnan]

Hi Stefan, 

 

Greetings from Syncfusion support. 

 

We can achieve your requirement by using @bind-value attribute in multiselect component . We can pass applicable values to the property as per the TValue mapped to the component.Kindly refer the below code snippet and sample for your reference. 

 

[Index.razor] 

 

<SfMultiSelect TValue="string[]" Mode="VisualMode.CheckBox" TItem="Countries" PopupHeight="230px" Placeholder="Project Status" FloatLabelType="Syncfusion.Blazor.Inputs.FloatLabelType.Auto" 

               DataSource="@DataSource" @bind-Value="@val"> 

    <MultiSelectTemplates TItem="Countries"> 

        <ItemTemplate> 

            <table> 

                <tr> 

                    <td> 

                        @((context as Countries).Name) 

                    </td> 

                </tr> 

            </table> 

        </ItemTemplate> 

        <ValueTemplate> 

 

        </ValueTemplate> 

    </MultiSelectTemplates> 

    <MultiSelectFieldSettings Value="Code"></MultiSelectFieldSettings> 

</SfMultiSelect> 

 

@code { 

 

private string[] val { get; set; } 

 

 

  protected override async Task OnInitializedAsync() 

    { 

        DataSource = await ownservice.GetDataAsync(); 

        val = await ownservice.GetPreSelectDataAsync(); 

    } 

} 

 

[OwnService.cs] 

 

public async Task<string[]> GetPreSelectDataAsync() 

        { 

            string[] value = { "AU", "BM", "DK", "FR" }; 

 

            return await Task.FromResult(value); 

        } 

 

 

Sample Link :  https://www.syncfusion.com/downloads/support/forum/169916/ze/Blazor_latest_uploader57043368  

 

 

Thanks, 

Deepak R.